Guide · Open source
How to use react-color: install and add a color picker in React
Updated · written with AI from the project's own documentation and checked against our catalogue data
react-color is an open-source JavaScript library that provides color picker components for React apps. It includes 13 pickers styled after tools such as Sketch, Photoshop and Chrome, plus building-block components for making your own. This guide shows you how to install it, render a picker, and choose among the available options.
React Colorcasesandberg/react-color · ★ 12.3k · MIT Install options & downloads Quick start
- 1Check prerequisites. Confirm that Node.js and npm are installed, since the README lists them as the requirements.
- 2Install the package. Run npm install react-color --save in your project folder.
- 3Import a picker. Import a named picker such as SketchPicker from 'react-color'.
- 4Render the component. Place the picker inside a React component's render output.
- 5Pick a different style if needed. Import another of the 13 named pickers to change the look.
- 6Build a custom picker. Use the building-block components when you need your own design.
Install react-color with npm
react-color is installed as a package with npm. The README lists Node.js and npm as the tools you need, and the install command is shown below.
- Make sure Node.js and npm are available on your machine.
- Run the install command inside your React project folder.
npm install react-color --saveImport a picker component into your React code
Import the picker you want by name from the react-color package, then render it like any other React component. The README example uses SketchPicker inside a class component.
import React from 'react'
import { SketchPicker } from 'react-color'
class Component extends React.Component {
render() {
return <SketchPicker />
}
}Choose from the 13 available pickers
The README says you can import any of 13 pickers. Each one is named in the import, so swapping styles means changing the name you import. The library's demo page shows how each one looks.
- AlphaPicker
- BlockPicker
- ChromePicker
- CirclePicker
- CompactPicker
- GithubPicker
- HuePicker
- MaterialPicker
- PhotoshopPicker
- SketchPicker
- SliderPicker
- SwatchesPicker
- TwitterPicker
Build your own picker from building blocks
The README says the library includes building-block components you can use to make your own picker. Use these when none of the 13 built-in designs fits your interface.
Know the styling approach before you adopt it
The README states that react-color uses 100% inline styles through ReactCSS. If your project relies on external stylesheets for styling components, plan for this difference before you adopt the library.
What people use it for
- Adding a color selection control to a React web interface
- Offering a picker that resembles Sketch or Photoshop to users familiar with those tools
- Assembling a custom color picker from the provided building blocks
Frequently asked questions
How do I install react-color?
Install it with npm by running npm install react-color --save in your project. The README lists Node.js and npm as the prerequisites.
Is react-color free to use?
react-color is released under the MIT licence, as stated on its repository page. Check the LICENSE file in the repository for the full terms.
What do I need to run react-color?
The README lists Node.js and npm as prerequisites. The library is a React component package, so you need a React project to use it.
Can I use react-color without React?
The README describes only React usage, so this library is not documented for use outside React.
What are the alternatives to react-color?
The comparable projects listed for this item are react-colorful, react-color-picker and react-input-color. Compare their features and styling approach against your needs before choosing.
Why does my picker look different from the demo?
The README says react-color uses 100% inline styles through ReactCSS. Check that you imported the picker name you intended and that your project renders it as a React component.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
react-color suits React developers who want a ready-made picker that looks like Sketch, Photoshop or Chrome, or who want to assemble a custom one from its building blocks. Skip it if you are not writing React, need a picker outside React, or require an external-stylesheet approach, since the README describes inline styles.
Install options & downloads