Miss any of our Open RFC calls?Watch the recordings here! »

use-colorlab

0.1.0 • Public • Published

use-colorlab

A custom React Hook that provides a context for color data. This is designed to be used with the export object from https://colorlab.dev

Installation

$ npm install use-colorlab

Example

Provider

import {ColorProvider} from 'use-colorlab';
 
const colors = {
  red: {
    10: {
      hex: "#f00",
    },
    default: {
      hex: "#c00"
    }
  }
}
 
const App = () => (
  <ColorProvider colors={colors}>
    {/* ... */}
  </ColorProvider>
);

Hook

Under the ColorProvider context, the useColorlab hook will give access to color functions

import {useColorlab} from 'use-colorlab';
 
const MyComponent = () => {
  const {red} = useColorlab();
  return (
    <h1 style={{color: red()}}>Hello, world!</h1>
  )
}

The api for each color function takes the form of [color](stop: number, format: string)

purple() // #6953eb - The hex code for the default stop
purple(80) // #3f20ba - Hex code for stop 80
purple('css') // rgb(105,83,235) - css rgb value for the default stop
purple(30, 'hsl') // hsl(246.23,81.05%,81.37%) - hsl value for stop 30

Keywords

none

Install

npm i use-colorlab

DownloadsWeekly Downloads

4

Version

0.1.0

License

ISC

Unpacked Size

16.3 kB

Total Files

12

Last publish

Collaborators

  • avatar