https://github.com/jeslage/react-pick-color
Small color picker component for react 🎨
https://github.com/jeslage/react-pick-color
color color-palette color-picker component picker react
Last synced: 4 months ago
JSON representation
Small color picker component for react 🎨
- Host: GitHub
- URL: https://github.com/jeslage/react-pick-color
- Owner: jeslage
- Created: 2020-02-22T22:04:50.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-08-13T14:42:42.000Z (almost 2 years ago)
- Last Synced: 2025-01-31T15:39:56.696Z (4 months ago)
- Topics: color, color-palette, color-picker, component, picker, react
- Language: TypeScript
- Homepage: https://react-pick-color.vercel.app/
- Size: 1.89 MB
- Stars: 22
- Watchers: 2
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
[Examples](https://react-pick-color.vercel.app)
# React Pick Color
Small color picker component for React written in TypeScript.
## Install
```sh
npm install react-pick-color
# or
yarn add react-pick-color
```
## Usage
```js
import React, { useState } from 'react';
import ColorPicker from 'react-pick-color';
const App = () => {
const [color, setColor] = useState('#fff');
return setColor(color.hex)} />;
};
```
## Options
**`color`**
`string | { r: number, g: number, b: number, a: number } | { h: number, s: number, l: number, a: number }` | optional
The initial color as a hex string or rgba/hsla object.
---
**`onChange`**
`(color: { hex: string, rgb: object, hsl: object, alpha: number }) => void` |Â optional
onChange callback with the current color object.
---
**`presets`**
`array` | optional
---
**`combinations`**
`"analogous" | "monochromatic" | "splitcomplement" | "triad" | "tetrad" | "complement"` | optional
Provide `combinations` as a string or an array of `combinations`.
---
**`hideAlpha`**
`boolean` | optional |Â default: `false`
Hide the alpha range handler.
---
**`hideInputs`**
`boolean` | optional |Â default: `false`
Hide color inputs
---
**`theme`**
`{ background: string, inputBackground: string, color: string, borderColor: string, borderRadius: string, boxShadow: string, width: string }` | optional | default: `themes.light`
You can add a custom theme for styling the colorpicker component or choose one from the predefined themes.
**Custom Theme**
```js
import ColorPicker from 'react-pick-color';
const ThemedColorPicker = () => {
return (
);
};
```
**Predefined Theme**
`react-pick-color` exports a `dark` and a `light` theme.
```js
import ColorPicker, { themes } from 'react-pick-color';
const ThemedColorPicker = () => {
return ;
};
```
## Roadmap
- [ ] Size optimization
- [x] Build little demo site or codesandboxes
- [Â ] Remove tinycolor dependency
- [x] Add build pipeline
- [Â ] Different CSS solution