Add Interactive Glow Effect To React Components

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:

Download Details:

Author: codaworks

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/codaworks/react-glow

License: MIT