31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import useRippleBuilder from './hooks/useRippleBuilder';
|
|
import React, { forwardRef, useId, useRef } from 'react';
|
|
import { RippleAreaProps, RippleContainer } from './ripple.types';
|
|
|
|
const rippleAreaContext = React.createContext(false);
|
|
|
|
const RippleEffect = forwardRef<RippleContainer, RippleAreaProps>(
|
|
({ central = false, ...props }, ref) => {
|
|
const uniqueId = useId(),
|
|
rippleDomain = useRef<HTMLSpanElement>(null),
|
|
clicked = useRef<boolean>(false),
|
|
ripples = useRippleBuilder(clicked, rippleDomain, central, ref);
|
|
|
|
return (
|
|
<span
|
|
className={`m3 m3-ripple-domain ${props.className ?? ''}`.trimEnd()}
|
|
id={uniqueId}
|
|
ref={rippleDomain}
|
|
>
|
|
<rippleAreaContext.Provider value={clicked.current}>
|
|
{Object.values(ripples)}
|
|
</rippleAreaContext.Provider>
|
|
</span>
|
|
);
|
|
},
|
|
);
|
|
|
|
export { rippleAreaContext, RippleEffect };
|