# cursor-flashlight

> Tiny lib to add flashlight effect to your website 🔦

Latest version **1.0.1** (published 2021-02-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install cursor-flashlight
pnpm add cursor-flashlight
yarn add cursor-flashlight
bun add cursor-flashlight
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-02-24 |
| First published | 2021-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Jacky Efendi |
| Maintainers | jackyef |
| Keywords | flashlight, effect, cursor |

## Links

- npm: https://www.npmjs.com/package/cursor-flashlight
- Repository: https://github.com/jackyef/cursor-flashlight
- Homepage: https://github.com/jackyef/cursor-flashlight#readme
- Issues: https://github.com/jackyef/cursor-flashlight/issues
- npm.io page: https://npm.io/package/cursor-flashlight

## Recent versions

- 1.0.1 (latest) — 2021-02-24
- 1.0.0 — 2021-02-24
- 0.0.2 — 2021-02-24
- 0.0.1 — 2021-02-24

## README

[![minified-gzipped-size](https://img.shields.io/bundlephobia/minzip/cursor-flashlight.svg)](https://bundlephobia.com/result?p=cursor-flashlight)
# `cursor-flashlight` 🔦

A tiny library to add flashlight effect to your website 🔦

[Try it on CodeSandbox](https://codesandbox.io/s/cursor-flashlight-demo-w8o5t?file=/src/App.js)

![demo](assets/demo.gif)

> 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.

```ts
import { enable } from 'cursor-flashlight';

enable({ size: '15vmax' });
```

### Example with React

```tsx
import React from 'react';
import {
  enable,
  disable,
  isEnabled,
} from 'cursor-flashlight';

const App = () => {
  const handleToggleFlashlight = () => {
    if (isEnabled()) {
      disable()
    } else {
      enable({ size: '15vmax' })
    }
  }

  return (
    <div>
      Lorem ipsum stuffs
      <button onClick={handleToggleFlashlight}>Toggle flashlight</button>
    </div>
  )
};
```

---
_Source: https://npm.io/package/cursor-flashlight · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._