Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Wondermarin/react-color-palette
🎨 Lightweight Color Picker component for React.
https://github.com/Wondermarin/react-color-palette
color color-palette color-picker hex palette picker react react-component
Last synced: about 1 month ago
JSON representation
🎨 Lightweight Color Picker component for React.
- Host: GitHub
- URL: https://github.com/Wondermarin/react-color-palette
- Owner: Wondermarin
- License: mit
- Created: 2020-07-21T22:51:01.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-10T15:46:15.000Z (8 months ago)
- Last Synced: 2024-04-13T21:08:56.850Z (8 months ago)
- Topics: color, color-palette, color-picker, hex, palette, picker, react, react-component
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-color-palette-2zw8q
- Size: 105 MB
- Stars: 230
- Watchers: 0
- Forks: 23
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome - Wondermarin/react-color-palette - 🎨 Lightweight Color Picker component for React. (TypeScript)
README
## Installation
### yarn
```sh
yarn add react-color-palette
```
### npm
```sh
npm install react-color-palette
```
## Usage
```tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("#561ecb");
return ;
}
```
## Examples
### Usage `rgb()` in `useColor()`
```tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("rgb(86 30 203)");
return ;
}
```
### Usage `` in `useColor()`
```tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("cyan");
return ;
}
```
### Custom Layout
```tsx
import { Saturation, Hue, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("hsl(120 100% 50% / .5)");
return (
);
}
```
### HEX input only
```tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("#123123");
return
}
```
### onChangeComplete optional callback
```tsx
import { ColorPicker, useColor, type IColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
const [color, setColor] = useColor("#123123");
const onChangeComplete = (color: IColor) => localStorage.setItem("color", color.hex);
return
}
```
## API
### ``
The main component, which includes: <Saturation />, <Hue />, <Alpha /> and <Fields /> components for instant use.
If you need a custom layout, then you can use <Saturation />, <Hue /> and <Alpha /> components separately, which are also exported from the library.
Prop
Type
Default
Description
height
number
200
Height of the Saturation component in pixels.
hideAlpha
boolean
false
Hides the Alpha component.
hideInput
(keyof IColor)[] | boolean
false
If boolean: hides all inputs if true or displays all inputs if false. If array: hides all inputs listed in the array.
color
IColor
Current color.
disabled
boolean
false
Disables interactivity.
onChange
Function
Сallback function will be fired when color changes.
onChangeComplete
Function
Callback function will be fired when the interaction is complete with the color picker.
### ``
Prop
Type
Default
Description
height
number
Height of the saturation element in pixels.
color
IColor
Current color.
disabled
boolean
false
Disables interactivity.
onChange
Function
Сallback function will be fired when color changes.
onChangeComplete
Function
Callback function will be fired when the interaction is complete with the saturation picker.
### ``
Prop
Type
Default
Description
color
IColor
Current color.
disabled
boolean
false
Disables interactivity.
onChange
Function
Сallback function will be fired when color changes.
onChangeComplete
Function
Callback function will be fired when the interaction is complete with the hue picker.
### ``
Prop
Type
Default
Description
color
IColor
Current color.
disabled
boolean
false
Disables interactivity.
onChange
Function
Сallback function will be fired when color changes.
onChangeComplete
Function
Callback function will be fired when the interaction is complete with the alpha picker.
### `useColor()`
Arg
Type
Default
Description
initialColor
TColor
Initial сolor.
### `TColor`
Value can be specified using one of the methods listed below:
- ``
- ``
- sRGB color space: `hsl()`, `hwb()` or `rgb()`
### `IColor`
Field
Type
hex
string
rgb
IColorRgb
hsv
IColorHsv
### `IColorRgb`
Field
Type
r
number
g
number
b
number
a
number
### `IColorHsv`
Field
Type
h
number
s
number
v
number
a
number
## License
Code released under the MIT license.
