@arolariu/components
Version:
A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)! 😍
74 lines (73 loc) • 3.18 kB
JavaScript
"use client";
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__ from "motion/react";
import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__ from "../../lib/utils.js";
const RippleButton = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.forwardRef(({ children, onClick, className, rippleClassName, scale = 10, transition = {
duration: 0.6,
ease: "easeOut"
}, ...props }, ref)=>{
const [ripples, setRipples] = __WEBPACK_EXTERNAL_MODULE_react__.useState([]);
const buttonRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(null);
__WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle(ref, ()=>buttonRef.current);
const createRipple = __WEBPACK_EXTERNAL_MODULE_react__.useCallback((event)=>{
const button = buttonRef.current;
if (!button) return;
const rect = button.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const newRipple = {
id: Date.now(),
x,
y
};
setRipples((prev)=>[
...prev,
newRipple
]);
setTimeout(()=>{
setRipples((prev)=>prev.filter((r)=>r.id !== newRipple.id));
}, 600);
}, []);
const handleClick = __WEBPACK_EXTERNAL_MODULE_react__.useCallback((event)=>{
createRipple(event);
if (onClick) onClick(event);
}, [
createRipple,
onClick
]);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.button, {
ref: buttonRef,
onClick: handleClick,
whileTap: {
scale: 0.95
},
whileHover: {
scale: 1.05
},
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("relative h-10 px-4 py-2 text-sm font-medium text-primary-foreground overflow-hidden bg-primary cursor-pointer rounded-lg focus:outline-none", className),
...props,
children: [
children,
ripples.map((ripple)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.span, {
initial: {
scale: 0,
opacity: 0.5
},
animate: {
scale,
opacity: 0
},
transition: transition,
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("absolute bg-primary-foreground rounded-full size-5 pointer-events-none", rippleClassName),
style: {
top: ripple.y - 10,
left: ripple.x - 10
}
}, ripple.id))
]
});
});
RippleButton.displayName = "RippleButton";
export { RippleButton };
//# sourceMappingURL=ripple-button.js.map