Description:
A React component to add an interactive glow effect to React Components. Works with the latest TailwindCSS.
How to use it:
1. Installation.
# NPM $ npm i @codaworks/react-glow
2. Wrap Glow components into the GlowCapture component.
<GlowCapture>
<Glow color='indigo'>
<span className='text-black glow:text-glow/50 glow:bg-red-100'>
...
</span>
</Glow>
</GlowCapture>3. Add the tailwind plugin to unlock the glow: variant and glow color.
module.exports = {
...
plugins: [
require('@codaworks/react-glow/tailwind')
]
}4. Or style the glow effect using CSS.
<GlowCapture>
<Glow color='hsl(338.69 100% 48.04%)'>
<span className='glowable-text'>
...
</span>
</Glow>
</GlowCapture>.glowable-text {
color: black;
}
[glow] .glowable-text {
color: var(--glow-color);
}Preview:
