# @react-vertex/color-hooks

> React hooks for WebGL friendly colors

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

## Install

```sh
npm install @react-vertex/color-hooks
pnpm add @react-vertex/color-hooks
yarn add @react-vertex/color-hooks
bun add @react-vertex/color-hooks
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2021-02-24 |
| First published | 2019-04-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 13.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1234 |
| Author | Steven Hall |
| Maintainers | sghall |
| Keywords | react, colors, hex, rgb, webgl |

## Links

- npm: https://www.npmjs.com/package/@react-vertex/color-hooks
- Repository: https://github.com/sghall/react-vertex
- Homepage: https://github.com/sghall/react-vertex/tree/master/packages/color-hooks#readme
- Issues: https://github.com/sghall/react-vertex/issues
- npm.io page: https://npm.io/package/@react-vertex/color-hooks

## Dependencies (3)

- [hex-rgb](https://npm.io/package/hex-rgb.md) ^4.2.0
- [rgb-hex](https://npm.io/package/rgb-hex.md) ^3.0.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.4.3

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 3.0.0 (latest) — 2021-02-24
- 2.0.0 — 2021-02-15
- 1.8.0 — 2019-05-24
- 1.7.0 — 2019-05-21
- 1.6.0 — 2019-05-17
- 1.5.0 — 2019-05-17
- 1.4.0 — 2019-05-14
- 1.2.0 — 2019-05-03
- 1.1.0 — 2019-05-03
- 1.0.0 — 2019-04-28

## README

## `@react-vertex/color-hooks`

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/color-hooks/LICENSE)
[![npm version](https://img.shields.io/npm/v/@react-vertex/color-hooks.svg)](https://www.npmjs.com/package/@react-vertex/color-hooks)
[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/color-hooks)](https://bundlephobia.com/result?p=@react-vertex/color-hooks)

### [Documentation and Examples](https://react-vertex.com)

Hooks and utility functions for converting colors to WebGL friendly formats.

##### Install via npm:
```js
npm install @react-vertex/color-hooks
```

##### Importing:

```js
import {
  useHex,
  convertHex,
  useRgb,
  convertRgb,
} from '@react-vertex/color-hooks'
```

#### `useHex(hex, noAlpha?)` => `Array`
#### `convertHex(hex, noAlpha?)` => `Array`

Convert hex colors to WebGL friendly format. Exported as a hook (`useHex`) and a utility function (`convertHex`).

###### Arguments:

`hex`: String hex color.

`noAlpha (optional)`: Boolean indicating if you want the alpha value in the array.

###### Returns:

`array`: An array of numbers between 0 and 1.  A four element array by default and three elements if the `noAlpha` parameter is used.

###### Example Usage:

```js
import {
  useHex,
  convertHex,
} from '@react-vertex/color-hooks'

const [r, g, b, a] = useHex('#fff')
// [1, 1, 1, 1]

const clearColor = useHex('#0006')
// [0, 0, 0, 0.4]

convertHex('#4183c4')
// [0.2549019607843137, 0.5137254901960784, 0.7686274509803922, 1]

convertHex('#4183c4', true) // Drop the alpha by passing true as a second param 
// [0.2549019607843137, 0.5137254901960784, 0.7686274509803922]

gl.clearColor(...convertHex('#323334'))
```

#### `useRgb(rgb, noAlpha?)` => `Array`
#### `convertRgb(rgb, noAlpha?)` => `Array`

Convert rgb colors to WebGL friendly format. Exported as a hook (`useRgb`) and a utility function (`convertRgb`).

###### Arguments:

`rgb`: String rgb color e.g. `'rgb(40, 42, 54)'` or `'rgba(40, 42, 54, 75%)'`.

`noAlpha (optional)`: Boolean indicating if you want the alpha value in the array.

###### Returns:

`array`: An array of numbers between 0 and 1.  A four element array by default and three elements if the `noAlpha` parameter is used.

###### Example Usage:

```js
import {
  useRgb,
  convertRgb,
} from '@react-vertex/color-hooks'

const [r, g, b, a] = useRgb('rgb(255, 255, 255)');
// [1, 1, 1, 1]

const clearColor = convertRgb('rgb(255, 0, 255)', true)
// [1, 0, 1]
```

---
_Source: https://npm.io/package/@react-vertex/color-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._