cursor-flashlight 🔦

A tiny library to add flashlight effect to your website 🔦

Try it on CodeSandbox

Note: The effect won't show on devices without mouse (e.g.: smartphones)

Usage

Simply import the module and enable the flashlight with the size of the flashlight circle.

1import { enable } from 'cursor-flashlight';
2
3enable({ size: '15vmax' });

Example with React

1import React from 'react';
2import {
3  enable,
4  disable,
5  isEnabled,
6} from 'cursor-flashlight';
7
8const App = () => {
9  const handleToggleFlashlight = () => {
10    if (isEnabled()) {
11      disable()
12    } else {
13      enable({ size: '15vmax' })
14    }
15  }
16
17  return (
18    <div>
19      Lorem ipsum stuffs
20      <button onClick={handleToggleFlashlight}>Toggle flashlight</button>
21    </div>
22  )
23};