https://github.com/obsius/color-chooser
React component for selecting colors.
https://github.com/obsius/color-chooser
Last synced: 6 months ago
JSON representation
React component for selecting colors.
- Host: GitHub
- URL: https://github.com/obsius/color-chooser
- Owner: obsius
- Created: 2019-11-18T03:42:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-07-23T02:14:57.000Z (almost 2 years ago)
- Last Synced: 2025-03-14T23:36:41.462Z (over 1 year ago)
- Language: JavaScript
- Size: 4.18 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Color Chooser
A `React` component for choosing colors.
Provides a widget for choosing a color, allows for editing and viewing of:
- HEX
- RGB
- HSV
- HSL
- Alpha (pass property alpha to enable alpha channel)
Does not include funtionality to open or close the widget, this integration must be done manually.
All styling in `CSS`, override with your own style to customize.
Only depends on `React`.
## Screenshots
## Usage
```js
```
### Props
Name | Required | Description
-|-|-
`color` | Yes | A hex value for the color to show. `#00FF00` or `#00FF00FF` (alpha)
`onChange` | No | Callback for when the color is changed. Hex value of color.
`alpha` | No | Show the alpha layer.
## Example
```js
import React from 'react';
import ColorChooser from 'color-chooser';
import 'color-chooser/lib/color-chooser.css';
import './my-color-chooser-style-override.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
color: '#00FF00'
};
}
handleColorChange = (color) => {
this.setState({
...this.state,
color: color
});
};
render() {
let overlay = this.state.isOpen && (
);
return (
{ overlay }
);
}
}
```
## Contributing
Feel free to make changes and submit pull requests whenever.
## License
ColorChooser uses the [MIT](https://opensource.org/licenses/MIT) license.