@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)! 😍
40 lines (39 loc) • 1.83 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 animation = {
backgroundSize: "100% 100%"
};
const HighlightText = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.forwardRef(({ text, className, inView = false, inViewMargin = "0px", transition = {
duration: 2,
ease: "easeInOut"
}, ...props }, ref)=>{
const localRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(null);
__WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle(ref, ()=>localRef.current);
const inViewResult = (0, __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.useInView)(localRef, {
once: true,
margin: inViewMargin
});
const isInView = !inView || inViewResult;
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.span, {
ref: localRef,
initial: {
backgroundSize: "0% 100%"
},
animate: isInView ? animation : void 0,
transition: transition,
style: {
backgroundRepeat: "no-repeat",
backgroundPosition: "left center",
display: "inline"
},
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("relative inline-block px-2 py-1 rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-500 dark:to-purple-500", className),
...props,
children: text
});
});
HighlightText.displayName = "HighlightText";
export { HighlightText };
//# sourceMappingURL=highlight-text.js.map