react-colorful is a tiny color picker component for modern React apps.
Features
- Small: Just 1,5 KB (minified and gzipped). Size Limit controls the size.
- Fast: Built with hooks and functional components only.
- Simple: The interface is straight forward and easy to use.
- Mobile-friendly: Works well on mobile devices and touch screens.
- No dependencies
Live demos
Install
npm install react-colorful --save
Usage
import ColorPicker from "react-colorful";
import "react-colorful/dist/index.css";
const YourComponent = () => {
const [color, setColor] = useState("#aabbcc");
return <ColorPicker hex={color} onChange={setColor} />;
};Overriding styles
The easiest way to tweak react-colorful is to create another stylesheet to override the default styles.
.react-colorful {
height: 250px;
}
.react-colorful__saturation {
bottom: 30px;
border-radius: 3px 3px 0 0;
}
.react-colorful__hue {
height: 30px;
border-radius: 0 0 3px 3px;
}
.react-colorful__saturation-pointer {
border-radius: 5px;
}
.react-colorful__hue-pointer {
border-radius: 2px;
width: 15px;
height: inherit;
}