Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/deebov/atomik-color-picker
Hooks (and component) for building accessible color picker for React.
https://github.com/deebov/atomik-color-picker
a11y color color-picker hooks react typescript
Last synced: 3 months ago
JSON representation
Hooks (and component) for building accessible color picker for React.
- Host: GitHub
- URL: https://github.com/deebov/atomik-color-picker
- Owner: deebov
- License: mit
- Created: 2020-09-08T02:40:47.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-17T17:54:13.000Z (almost 2 years ago)
- Last Synced: 2024-05-06T06:01:49.943Z (6 months ago)
- Topics: a11y, color, color-picker, hooks, react, typescript
- Language: TypeScript
- Homepage: https://j3pyf.csb.app/
- Size: 429 KB
- Stars: 14
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Atomik Color
Hooks (and component) for building accessible color picker for React. 0 dependecies, tiny ~3K, built-in powerful color conversions, touch and pen support, keyboard and screen-reader accessible, built using React hooks, fast!
 
[Live Demo](https://jzk8hg.csb.app/)
## Features
- ✅ Accessible - everything is accessible for screen-readers and by keyboard⌨️
- ✅ Screen-reader - color values are human-readable for screen-readers👓
- ✅ Touch support - use with pen or mobile devices without glitches
- ✅ Modular - made with hooks⚛️, atomik utils and components
- ✅ Tiny - 0 dependecies, ~3K
- ✅ Fast🚀 - optimized and hand-picked algorithms
- ✅ Dark mode 🌑 (coming soon)
- ✅ Beautiful UI 😎🍑🚀
## Installation
> This examples shows how to install and use the color picker component, not the hooks! If you want to build your own color picker using our hooks see this [example](https://codesandbox.io/s/atomik-color-hooks-k85hw)
```bash
yarn add @atomik-color/component
```
## Usage
```jsx
import ColorPicker from "@atomik-color/component"
```
### With default value
```jsx
import { str2Color } from "@atomik-color/core"
```
### Controlled value
```jsx
import { useState } from "react";
const [color, setColor] = useState()
```
## Supported colors
- `RGB`
- `HSV`
- `HEX`
- `HSL` coming soon
- Alpha
The color value is converted to multiple formats automatically, so you don't have to deal with color conversion 😄. You can access them via `state.color`.
## API
### ColorPicker
**Props**
| Name | Description | Type | Default |
| --------------- | ----------------------------------------------- | ------------------------ | ------- |
| `value?` | Present color value | `TColor` | - |
| `defaultValue?` | Default color | `TColor` | - |
| `onChange?` | Callback function for tracking the state change | `(value:TColor) => void` | - |
| `showPreview?` | If true, preview box will be shown | `true` |
### useColorState
`useColorState(props: UseColorStateProps): UseColorState`
**Props**
| Name | Description | Type | Default |
| --------------- | ----------------------------------------------- | ------------------------ | ------- |
| `value?` | Present color value | `TColor` | - |
| `defaultValue?` | Default color | `TColor` | - |
| `onChange?` | Callback function for tracking the state change | `(value:TColor) => void` | - |
**Returns**
`UseColorState`
| Name | Description | Type |
| --------------------------- | -------------------------------------- | -------- |
| `color` | Color value | `TColor` |
| `setH(value:number)` | sets Hue (0-359) |
| `setS(value:number)` | sets Saturation (0-100) |
| `setV(value:number)` | sets Value (Brightness) |
| `setSV(s:number, v:number)` | sets Saturation and Value |
| `setR(value:number)` | sets Red (0-255) |
| `setG(value:number)` | sets Green (0-255) |
| `setB(value:number)` | sets Blue (0-255) |
| `setA(value:number)` | sets Alpha (0-100) |
| `rotateH(amount:number)` | rotates Hue by `amount` |
| `rotateS(amount:number)` | rotates Saturation by `amount` |
| `rotateV(amount:number)` | rotates Value (Brightness) by `amount` |
| `rotateA(amount:number)` | rotates Alpha by `amount` |
**`TColor`**
Color object that's used across the package.
| Name | Description | Type |
| ----- | ----------------------------------------------------------------------------- | -------- |
| `r` | Red | `number` |
| `g` | Green | `number` |
| `b` | Blue | `number` |
| `a` | Alpha (0-100) | `number` |
| `h` | hue | `number` |
| `s` | Saturation | `number` |
| `v` | Value (Brightness) | `number` |
| `hex` | hex value without `#` prefix | `string` |
| `str` | if alpha is full then returns hex value with `#` prefix otherwise rgba string | `string` |
### useColorBoard
**Props**
| Name | Description | Type | Default |
| ------------------ | ------------------------------------------ | ------------------------ | ------- |
| `state` | Color state | `ColorState` | - |
| `ref` | Ref of the element used as color rectangle | `RefObject` | - |
| `ariaLabel?` | Aria label | `string` | - |
| `ariaValueFormat?` | Formatted string used for `aria-valuetext` | `string` | - |
| `ariaDescription?` | Aria description | `string` | - |
### useHueSlider
**Props**
| Name | Description | Type | Default |
| ------- | ---------------------------------------- | ------------------------ | ------- |
| `state` | Color state | `ColorState` | - |
| `ref` | Ref of the element used as hue container | `RefObject` | - |
### useAlphaSlider
**Props**
| Name | Description | Type | Default |
| ------- | ------------------------------------------ | ------------------------ | ------- |
| `state` | Color state | `ColorState` | - |
| `ref` | Ref of the element used as alpha container | `RefObject` | - |