roguerrero1 / use-color

🛼🛼🛼 The powerful color hook that all designers deserve. ✨ Parse and stringify that just works & 🦾 Strict type checking at compile time

use-color

The powerful color hook that all designers deserve.

👉 I'm planning to detach the core class to @roller-skates/core. The same workspace will include a lot of cool packages that will help you to "use colors", so stay tuned!

yarn add use-color

import { useColor } from 'use-color'

Core functions

All the functions and types that power the hook are exported. Detailed documentation is TBD(planning to detach them as a core module).

import { parseColor } from 'use-color/parser'
import { ColorInput } from 'use-color/types/ColorInput'

const givenColor: ColorInput = 'rgb(34, 114, 235)'
const color = parseColor(givenColor)

Parse

const [color] = useColor('#2272eb')
color.rgb // { r: 34, g: 114, b: 235 }
color.rgba // { r: 34, g: 114, b: 235, a: 1 }

const [color] = useColor('rgb(34, 114, 235)')
color.strings.hex // #2272eb

const [color] = useColor('rgba(34, 114, 235, 0.5)')
color.strings.hex // #2272eb80
color.rgb // { r: 34, g: 114, b: 235 }
color.rgba // { r: 34, g: 114, b: 235, a: 0.5 }

Stringify

const [color] = useColor({ r: 255, g: 255, b: 255 })

color.strings.hex // '#ffffff'
color.strings.rgb // 'rgb(255, 255, 255)'
color.strings.rgba // 'rgb(255, 255, 255, 1)'

Stringify Options

const [color] = useColor({ r: 255, g: 255, b: 255 }, {
  hex: {
    transform: 'lowercase', // 'lowercase' | 'uppercase'
    compress: false, // boolean
    ignoreAlpha: false, // boolean
  }
})

Update

// when
const [color, setColor] = useColor({ r: 144, g: 194, b: 255 })
setColor('#fff')
setColor('rgb(255, 255, 255)')
setColor({ r: 255, g: 255, b: 255 })

// then
color.rgb // { r: 255, g: 255, b: 255 }

// when
setColor(({ b }) => `rgba(144, 194, ${b})`)
setColor(({ b }) => ({ r: 144, g: 194, b }))

// then
color.rgb // { r: 144, g: 194, b: 255 }

Compile-time Type checking

+ useColor('#00fffa')
- useColor('#00ffzz')
// Argument of type '"#00ffzaz"' is not assignable to parameter of type '...'.ts(2345)

+ useColor('rgb(255, 255, 255)')
- useColor('rgb(255, 255,)')
// Argument of type '"rgba(255, 255,)"' is not assignable to parameter of type '...'.ts(2345)

+ useColor('rgba(255, 255, 255, 1)')
- useColor('rgba(255, 255, 255)')
// Argument of type '"rgba(255, 255, 255)"' is not assignable to parameter of type '...'.ts(2345)

Credits

• Color hex string type implementation with generic constraints: https://stackoverflow.com/questions/54674576/typescript-is-it-possible-validate-string-types-based-on-pattern-matching-or-e#answer-54675049