# solid-glow

> Add a mouse-tracing glow effect to Solid components

Latest version **0.0.9** (published 2024-01-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install solid-glow
pnpm add solid-glow
yarn add solid-glow
bun add solid-glow
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2024-01-17 |
| First published | 2023-12-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 0 |
| Unpacked size | 25.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | aidanaden |
| Maintainers | aidanaden |
| Keywords | solid, glow, solidjs, solidjs-component |

## Links

- npm: https://www.npmjs.com/package/solid-glow
- Repository: https://github.com/aidanaden/solid-glow
- Homepage: https://github.com/aidanaden/solid-glow#readme
- Issues: https://github.com/aidanaden/solid-glow/issues
- npm.io page: https://npm.io/package/solid-glow

## Recent versions

- 0.0.9 (latest) — 2024-01-17
- 0.0.8 — 2024-01-13
- 0.0.7 — 2024-01-13
- 0.0.6 — 2024-01-13
- 0.0.5 — 2024-01-13
- 0.0.4 — 2024-01-13
- 0.0.3 — 2024-01-13
- 0.0.2 — 2024-01-13
- 0.0.1 — 2024-01-12
- 0.0.0 — 2023-12-19

## README

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=solid-glow&background=tiles&project=%20" alt="solid-glow">
</p>

# solid-glow

>

[![size](https://img.shields.io/bundlephobia/minzip/solid-glow?style=for-the-badge)](https://bundlephobia.com/package/solid-glow)
[![size](https://img.shields.io/npm/v/solid-glow?style=for-the-badge)](https://www.npmjs.com/package/solid-glow)
![npm](https://img.shields.io/npm/dw/solid-glow?style=for-the-badge)
[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)

[download-image]: https://img.shields.io/npm/dm/solid-glow.svg
[download-url]: https://npmjs.org/package/solid-glow

[![solid-glow](https://nodei.co/npm/solid-glow.png)](https://npmjs.org/package/solid-glow)

Add a mouse-tracing glow effect to Solid components.

![gif of glow effect](./media/glow.gif)

The glow effect will only work using the mouse as the pointer. Touch events will not trigger it.

## Quick start

Install it:

```bash
npm i solid-glow
# or
yarn add solid-glow
# or
pnpm add solid-glow
```

Use it:

Wrap any number of `<Glow>` components in a `<GlowCapture>` which will be used to track the mouse location.

```jsx
<GlowCapture>
  <span>This won't glow</span>
  <Glow color="purple">
    <span class="text-black glow:text-glow/50 glow:bg-red-100">
      This will glow purple when the mouse is passed over
    </span>
  </Glow>
</GlowCapture>
```

Children of `<Glow>` 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('solid-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
<GlowCapture>
  <span>This won't glow</span>
  <Glow color="hsl(338.69 100% 48.04%)">
    <span class="glowable-text">
      This will glow pink when the mouse is passed over
    </span>
  </Glow>
</GlowCapture>
```

```css
.glowable-text {
  color: black;
}

[glow] .glowable-text {
  color: var(--glow-color);
}
```

## Attribution

SolidJS port of [react-glow](https://github.com/codaworks/react-glow).

---
_Source: https://npm.io/package/solid-glow · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._