Add a mouse-tracing glow effect to React components
npm install @codaworks/react-glowshell
npm i @codaworks/react-glow
`
Usage
Wrap any number of components in a which will be used to track the mouse location.
`jsx
This won't glow
This will glow purple when the mouse is passed over
`
Children of can style themselves how to look when glowing. You might choose to leave some children unchanged, or highlight them with the glow: variant style.
The value of color will be available as a CSS variable --glow-color, as well as the Tailwind glow color.
You can pass any valid CSS color, including hsl() values etc.
Of course, you might choose to use any other color; you can leave out the color prop entirely.
Tailwind
Add the tailwind plugin to unlock the glow: variant and glow color
tailwind.config.js
`js
module.exports = {
...
plugins: [
require('@codaworks/react-glow/tailwind')
]
}
`
As with all colors in Tailwind, you may add opacity by appending a percentage after the color, such as bg-glow/20 for 20% opacity.
Vanilla CSS
You can style the glow effect with vanilla CSS:
`jsx
This won't glow
This will glow pink when the mouse is passed over
`
`css
.glowable-text {
color: black;
}
[glow] .glowable-text {
color: var(--glow-color);
}
``