@react-vertex/color-hooks

Documentation and Examples

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

Install via npm:

npm install @react-vertex/color-hooks

Importing:

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:

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:

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]