@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)! 😍
1 lines • 2.87 kB
Source Map (JSON)
{"version":3,"file":"components\\ui\\highlight-text.cjs","sources":["webpack://@arolariu/components/./src/components/ui/highlight-text.tsx"],"sourcesContent":["\n\nimport * as React from \"react\";\nimport {\n motion,\n useInView,\n type HTMLMotionProps,\n type Transition,\n type UseInViewOptions,\n} from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface HighlightTextProps extends HTMLMotionProps<\"span\"> {\n text: string;\n inView?: boolean;\n inViewMargin?: UseInViewOptions[\"margin\"];\n inViewOnce?: boolean;\n transition?: Transition;\n}\n\nconst animation = { backgroundSize: \"100% 100%\" };\n\nconst HighlightText = React.forwardRef<HTMLSpanElement, HighlightTextProps>(\n (\n {\n text,\n className,\n inView = false,\n inViewMargin = \"0px\",\n transition = { duration: 2, ease: \"easeInOut\" },\n ...props\n },\n ref\n ) => {\n const localRef = React.useRef<HTMLSpanElement>(null);\n React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);\n\n const inViewResult = useInView(localRef, {\n once: true,\n margin: inViewMargin,\n });\n const isInView = !inView || inViewResult;\n\n return (\n <motion.span\n ref={localRef}\n initial={{\n backgroundSize: \"0% 100%\",\n }}\n animate={isInView ? animation : undefined}\n transition={transition}\n style={{\n backgroundRepeat: \"no-repeat\",\n backgroundPosition: \"left center\",\n display: \"inline\",\n }}\n className={cn(\n `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`,\n className\n )}\n {...props}\n >\n {text}\n </motion.span>\n );\n }\n);\nHighlightText.displayName = \"HighlightText\";\n\nexport { HighlightText, type HighlightTextProps };\n"],"names":["animation","HighlightText","React","text","className","inView","inViewMargin","transition","props","ref","localRef","inViewResult","useInView","isInView","motion","undefined","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,YAAY;IAAE,gBAAgB;AAAY;AAEhD,MAAMC,gBAAgB,WAAhBA,GAAgBC,+BAAAA,UAAgB,CACpC,CACE,EACEC,IAAI,EACJC,SAAS,EACTC,SAAS,KAAK,EACdC,eAAe,KAAK,EACpBC,aAAa;IAAE,UAAU;IAAG,MAAM;AAAY,CAAC,EAC/C,GAAGC,OACJ,EACDC;IAEA,MAAMC,WAAWR,+BAAAA,MAAY,CAAkB;IAC/CA,+BAAAA,mBAAyB,CAACO,KAAK,IAAMC,SAAS,OAAO;IAErD,MAAMC,eAAeC,IAAAA,sBAAAA,SAAAA,EAAUF,UAAU;QACvC,MAAM;QACN,QAAQJ;IACV;IACA,MAAMO,WAAW,CAACR,UAAUM;IAE5B,OACE,WADF,GACE,qCAACG,sBAAAA,MAAAA,CAAAA,IAAW;QACV,KAAKJ;QACL,SAAS;YACP,gBAAgB;QAClB;QACA,SAASG,WAAWb,YAAYe;QAChC,YAAYR;QACZ,OAAO;YACL,kBAAkB;YAClB,oBAAoB;YACpB,SAAS;QACX;QACA,WAAWS,IAAAA,0BAAAA,EAAAA,EACT,iIACAZ;QAED,GAAGI,KAAK;kBAERL;;AAGP;AAEFF,cAAc,WAAW,GAAG"}