https://github.com/tohsaka888/use-luminance

https://github.com/tohsaka888/use-luminance

Last synced: 9 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/tohsaka888/use-luminance
• Owner: tohsaka888
• License: mit
• Created: 2022-04-04T06:18:03.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T14:40:21.000Z (11 months ago)
• Last Synced: 2024-09-17T01:38:30.041Z (about 2 months ago)
• Language: TypeScript
• Size: 854 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-luminance

## introduction

`use-luminance` is a simple, fast, and efficient luminance calculation hook.

it use the `useDeferredValue` hook to calculate the luminance of a color.

it can also provide a `useTheme` hook to calculate current theme based on the luminance of `background-color`.

## Tips

this package is only support for React18.To use it,you must upgrade your react version to 18.

## install

**with npm**

```sh

npm install --save use-luminance

```

**with yarn**

```sh

yarn add use-luminance

```

## usage

```tsx

import { useLuminance } from "use-luminance";

function App() {

  const luminance = useLuminance(color);

  return 
{luminance}
;

}

```


```tsx

import { useTheme } from "use-luminance";

function App() {

  const theme = useTheme(color);

  return 
{theme}
;

}

```


## API

- `useLuminance(color: string):number`

- `useTheme(color: string):'light'|'dark'`

> `color` is a string, it can be a rbg string or a hex color.Be careful,color name is not supported.

## demo

[click me to view](https://codesandbox.io/s/use-luminance-demo-56tvhu?file=/src/App.tsx)

## licence

MIT