Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codaworks/react-glow
https://github.com/codaworks/react-glow
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/codaworks/react-glow
- Owner: codaworks
- License: mit
- Created: 2023-09-27T17:57:26.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-01-18T04:31:58.000Z (11 months ago)
- Last Synced: 2024-03-14T19:43:26.567Z (9 months ago)
- Language: TypeScript
- Size: 5.64 MB
- Stars: 497
- Watchers: 4
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - react-glow
- jimsghstars - codaworks/react-glow - (TypeScript)
README
# React glow
Add a mouse-tracing glow effect to React components.
The glow effect will only work using the mouse as the pointer. Touch events will not trigger it.
See it live on [codaworks.com](https://codaworks.com).
## Installation
Install the package with npm:
```shell
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);
}
```
## How does it work?
The `` component clones the children tree. The cloned tree is then stacked on top of the original tree.
The overlay tree is transparent, and we only reveal parts using a CSS radial gradient mask. The mask position is updated
by tracking the mouse position.
When you use the `glow:` variant or `[glow]` attribute selector, it only targets the overlay.
In order to not block mouse events, the overlay is set to `pointer-events: none`.
We use the `` to track the mouse; the `` itself also keeps track of its position inside the ``.
### Best practices
The fact that we clone the children tree has some implications that is important to keep in mind:
- `` children should never have side effects. Since we duplicate the children, the effects will run twice.
- Keep the `` children small. Use a separate `` for each logical set of children (such as a single card).
- Don't apply layout styles to `glow:`. Keep the glow styles to just visuals, such as colors, opacity, and a slight scale might also work sometimes.
- Use callback refs: When you pass a ref to a glow child, the cloned version will "steal" the ref. Use a callback ref, and check if it is already set before assigning.
- It might be challenging to get it to correctly work with forms, especially if you have required fields. The cloned fields will also be marked as required and failing the validation.
- Use a single `` for a group of related glows. This allows you to get an overflowing glow effect when the mouse is between 2 glows.
- Apply some padding between the capture and the children, to show the glow even when you leave the `` instead of abruptly cutting off the effect.
## Attribution
Inspired by [this tweet](https://twitter.com/codepen/status/1696297659663888490).