Skip to content
main
Switch branches/tags
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

roller skate emoji

use-color

NPM version Package size codecov Build

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 '"#00ffzz"' 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

Topics

Resources

License

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •