https://github.com/aidanaden/solid-glow

Add a mouse-tracing glow effect to SolidJS components.
https://github.com/aidanaden/solid-glow

glow solidjs solidjs-component

Last synced: about 1 month ago
JSON representation

Add a mouse-tracing glow effect to SolidJS components.

• Host: GitHub
• URL: https://github.com/aidanaden/solid-glow
• Owner: aidanaden
• License: mit
• Created: 2023-12-19T08:30:28.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-18T23:22:59.000Z (11 months ago)
• Last Synced: 2024-11-09T17:52:16.931Z (about 1 month ago)
• Topics: glow, solidjs, solidjs-component
• Language: JavaScript
• Homepage: https://solid-glow.pages.dev/
• Size: 6.05 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



# 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 `` 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('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

  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);

}

```

## Attribution

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