Mouse Light

A framework-agnostic mouse tracking lighting effect.

Installation

``bash
npm install @yanren1225/mouse-light
`

Usage

$3

`javascript
import { MouseLight } from '@yanren1225/mouse-light';
import '@yanren1225/mouse-light/style.css';

const container = document.querySelector('.my-container');
const effect = new MouseLight(container, {
size: 300, // or '300px'
theme: 'auto', // 'light' | 'dark' | 'auto'
opacity: 0.15
});
`

$3

Just wrap your component or attach the ref to the element.

#### SolidJS Example

`jsx
import { onMount, onCleanup } from 'solid-js';
import { MouseLight } from '@yanren1225/mouse-light';
import '@yanren1225/mouse-light/style.css';

const MyComponent = () => {
let ref;
let light;

onMount(() => {
if (ref) light = new MouseLight(ref);
});

onCleanup(() => {
light?.destroy();
});

return

;
};
`

#### React Example

`jsx
import { useEffect, useRef } from 'react';
import { MouseLight } from '@yanren1225/mouse-light';
import '@yanren1225/mouse-light/style.css';

const MyComponent = () => {
const ref = useRef(null);

useEffect(() => {
if (!ref.current) return;

const light = new MouseLight(ref.current);

return () => {
light.destroy();
};
}, []);

return

;
};
`

#### Vue Example

`vue



`

#### Svelte Example

`svelte



``