Skip to content
This repository has been archived by the owner on Jul 15, 2022. It is now read-only.
/ use-color Public archive

πŸŸ₯πŸŸ₯πŸŸ₯πŸŸ₯πŸŸ₯⚠️ Archiving this repo; Pretty much useless to have this as an hook ⚠️πŸŸ₯πŸŸ₯πŸŸ₯πŸŸ₯πŸŸ₯

License

Notifications You must be signed in to change notification settings

junhoyeo/use-color

Folders and files

NameName
Last commit message
Last commit date

Latest commit

c5bc9c2 Β· Jul 15, 2022

History

79 Commits
Jul 4, 2021
Jul 3, 2021
Jul 3, 2021
Jul 3, 2021
Jul 11, 2021
Jul 3, 2021
Jul 4, 2021
Jul 3, 2021
Jul 3, 2021
Jul 3, 2021
Jul 15, 2022
Jul 3, 2021
Jul 4, 2021
Jul 3, 2021
Jul 4, 2021
Jul 11, 2021
Jul 4, 2021
Jul 11, 2021

Repository files navigation

roller skate emoji

use-color

NPM version Package size codecov Build

The powerful color hook that all designers deserve.

πŸŸ₯πŸŸ₯πŸŸ₯πŸŸ₯πŸŸ₯⚠️ Archiving this repo; Pretty much useless to have this as an hook ⚠️πŸŸ₯πŸŸ₯πŸŸ₯πŸŸ₯πŸŸ₯

πŸ‘‰ 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