Skip to content

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

License

Notifications You must be signed in to change notification settings

jonrose-dev/use-color

 
 

Repository files navigation

roller skate emoji

use-color

NPM version Package size codecov Build

The powerful color hook that all designers deserve.

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.string.hex // #2272eb

const [color] = useColor('rgba(34, 114, 235, 0.5)')
color.string.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.string.hex // '#ffffff'
color.string.rgb // 'rgb(255, 255, 255)'
color.string.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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 98.2%
  • JavaScript 1.8%