JSPM – react-glowcore@0.2.0

Package Exports

react-glowcore
react-glowcore/styles
react-glowcore/styles/glow.css

Readme

React Glowcore

React Glowcore is a headless, zero-clone, lightweight React primitive that applies a cursor-following glow effect to a single child element, activated only on hover.

It is designed for production use: tiny, dependency-free, fully customizable via CSS custom properties, and accessible by default. Unlike many alternatives, Glowcore never clones DOM nodes — you attach a single ref and the effect is applied with minimal runtime cost.

Quick Start

import React from "react"
import { useGlow } from "react-glowcore"
import "react-glowcore/styles/glow.css"

function Card() {
    const { glowRef } = useGlow<HTMLDivElement>({
        displayMode: "border",
        smoothFade: true,
        fadeOutDuration: 300,
        style: { color: "blue", padding: "4px" },
    })

    return (
        <div
            ref={glowRef}
            className="glow rounded-lg p-6"
            style={{
                background: `radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgb(59 130 246 / 0.5) 0%, transparent 40%)`,
            }}
        >
            Hover me!
        </div>
    )
}

Features

Headless: No visual opinion, you control markup and styling
Zero DOM cloning: Single ref attach — no subtree duplication
Tiny runtime: Direct DOM mutations for 60fps-safe position updates
Fade-out animation: Smooth glow fade-out when cursor leaves (optional)
Flexible API: useGlow() hook + Glow render-prop component
Programmatic theming: generateGlowStyles() and createGlowStyleFactory()
Accessibility: Respects prefers-reduced-motion and disables on touch

Installation

npm install react-glowcore
# or
yarn add react-glowcore
# or
pnpm add react-glowcore

Usage

With `useGlow()` hook (recommended)

import { useGlow } from "react-glowcore"
import "react-glowcore/styles/glow.css"

function Example() {
    const { glowRef } = useGlow<HTMLDivElement>({
        displayMode: "border",
        smoothFade: true,
        fadeOutDuration: 400,
        style: { color: "blue", padding: 4 },
    })

    return (
        <div
            ref={glowRef}
            className="glow"
            style={{
                background: `radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgb(59 130 246 / 0.5) 0%, transparent 40%)`,
            }}
        >
            Content
        </div>
    )
}

With `Glow` component

import { Glow } from "react-glowcore"
import "react-glowcore/styles/glow.css"

function Example() {
    return (
        <Glow>
            {(glowRef) => (
                <div ref={glowRef} className="glow">
                    Content
                </div>
            )}
        </Glow>
    )
}

API Reference

`useGlow<T extends HTMLElement>(options?: GlowOptions)`

Returns { glowRef: React.Ref<T> } — attach to the element you want tracked.

GlowOptions:

Option	Type	Default	Description
`disabled`	boolean	false	Disable the effect
`displayMode`	'border' \| 'fill'	'border'	Glow appears only on edges or fills interior
`smoothFade`	boolean	true	Enable smooth fade animations
`fadeOutDuration`	number	300	Fade-out duration in milliseconds (fade-in always 300ms)
`style`	GlowStyleConfig	-	Inline style customization

GlowStyleConfig:

Property	Type	Description
`color`	string	CSS color or preset key ('blue', 'purple', etc.)
`padding`	string \| number	Border thickness or preset key
`blurRadius`	string \| number	Glow fade distance or preset key

`Glow` component

Render-prop wrapper around useGlow(). Children must be a function receiving glowRef.

Styling

Import optional CSS with sensible defaults:

import "react-glowcore/styles/glow.css"

You control the gradient via CSS custom properties or inline styles:

<div
    style={{
        "--glow-color": "rgb(59 130 246 / 1)",
        "--glow-padding": "4px",
        "--glow-blur-radius": "70%",
        background: `radial-gradient(...var(--glow-x)...)`,
    }}
    className="glow"
>
    Content
</div>

Fade Animation

Smooth fade animations are enabled by default (smoothFade: true). The glow fades in over 300ms when the cursor enters, and fades out over a customizable duration when it leaves:

const { glowRef } = useGlow({
    smoothFade: true, // Enable smooth animations (default)
    fadeOutDuration: 400, // 400ms fade-out (fade-in always 300ms)
})

Disable animations entirely for instant appearance/disappearance:

const { glowRef } = useGlow({
    smoothFade: false, // No animations, instant appear/disappear
})

Presets

Use generateGlowStyles() for type-safe theming:

import {
    generateGlowStyles,
    createGlowStyleFactory,
    GlowColors,
    GlowPaddings,
} from "react-glowcore"

// Generate styles with presets
const blueGlow = generateGlowStyles({
    color: "blue",
    padding: "thick",
    blurRadius: "soft",
})

// Create a reusable factory
const cardGlow = createGlowStyleFactory({ color: "blue", padding: "default" })
<div style={cardGlow()}>Card 1</div>
<div style={cardGlow({ color: "purple" })}>Card 2</div>

Browser Support

Modern evergreen browsers with support for:

CSS custom properties
CSS masks
Radial gradients
Pointer events

Fallbacks are straightforward (omit mask, adjust background styles).

License

MIT — See LICENSE file for details.

Why Glowcore?

✓ No DOM cloning — Many hover/glow libraries clone children, breaking refs and context
✓ 60fps performance — Direct style mutations, no React state updates
✓ Minimal API — useGlow() hook and optional styling utilities
✓ Accessibility — Respects prefers-reduced-motion, disables on touch
✓ Optional fade-out — Smooth animations by default, disable per-element for instant behavior

react-glowcore