Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mockingbot/mb-color-picker
A React component that enables to pick color through HSV/HEX/RGBA.
https://github.com/mockingbot/mb-color-picker
Last synced: 1 day ago
JSON representation
A React component that enables to pick color through HSV/HEX/RGBA.
- Host: GitHub
- URL: https://github.com/mockingbot/mb-color-picker
- Owner: mockingbot
- Created: 2016-07-07T09:17:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T01:40:18.000Z (8 months ago)
- Last Synced: 2024-10-02T09:13:51.643Z (3 months ago)
- Language: JavaScript
- Homepage: https://mockingbot.github.io/mb-color-picker/
- Size: 2.74 MB
- Stars: 38
- Watchers: 8
- Forks: 9
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# mb-react-color-picker
>
[](https://www.npmjs.com/package/mb-react-color-picker) [](https://standardjs.com)
#### A React component that enables to pick color through HSV/HEX/RGBA.
## Install
```bash
npm i mb-react-color-picker
```
## About
```jsx
class ColorPicker extends React.component {
static propTypes = {
color: PropTypes.string,
/*
color for the color picker, case insensitive
valid pattern:
1) hex pattern like '#fff', '#FFFFFF'
2) rgba pattern like 'rgba(255, 255, 255, 1)'
*/
onChange: PropTypes.func,
/*
get called when a color is picked through dragging(hsv), the color is
passed in as the first and only param. Useful for managing history.
*/
onConfirm: PropTypes.func,
/*
get called when a color is picked. The color, formatted to rgba pattern,
like 'rgba(255, 255, 255, 1)', is passed in as the first and only param.
*/
applyDidMountSideEffect: PropTypes.func,
/*
get called in componentDidMount life cycle of the color picker.
*/
applyWillUnmountSideEffect: PropTypes.func,
/*
get called in componentWillUnmount life cycle of the color picker.
*/
themeColors: PropTypes.array,
/*
list of theme colors for quick pick, valid pattern is the same as above.
*/
customColors: PropTypes.array,
/*
list of custom colors for quick pick.
*/
customColorsHeaderText: PropTypes.string,
/*
header text for list of custom colors, defaults to 'Custom colors'.
*/
onDragStart: PropTypes.func,
/*
if a function is passed, it will get called when dragging the color
picker, a DOM element of the color picker will get passed as first and
only param. Useful for positioning if you need a non-fixed style.
*/
onClose: PropTypes.func,
/*
if a function is passed, a close button will appear on top right corner
on the color picker. Clicking on it will let the function get called.
*/
headerText: PropTypes.string,
/*
header text for color picker, defaults to 'Color Picker'.
*/
}
render () {
...
}
}
```
## Usage
```jsx
import React, { Component } from 'react'
import ColorPicker from 'mb-react-color-picker'
class Example extends Component {
state = {
color: '#996633'
}
handleChange = color => this.setState({ color })
render () {
const { color } = this.state
return (
)
}
}
```
Also, you can wrap a custom color picker element, for example, a eyedropper color picker, into the `` as its child, to enhance the color picker. The custom color picker will receive `hex`, `alpha`, `handleChange` as props to interchange color with the ``. You can check the usage in `/example/src/App.js`
## Demo
[Pick me :hearts:](https://mockingbot.github.io/mb-color-picker/)
## License
MIT © [mockingbot](https://github.com/mockingbot)