A framework-agnostic mouse tracking lighting effect
npm install @yanren1225/mouse-lightA framework-agnostic mouse tracking lighting effect.
``bash`
npm install @yanren1225/mouse-light
`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
});
`
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
Content;
};
`#### Vue Example
`vue
Content
`#### Svelte Example
`svelte
Content
``