This React Color Picker Tutorial Example will show you how to create a simple color picker using React. We will use the popular React Color library to create a color picker component.
First, we will install the React Color library. To do this, open a terminal window and run the following command:
npm install react-color
Next, we will create a new React component called ColorPicker. This component will render a color picker and allow users to select a color.
import React from ‘react’;
import { SketchPicker } from ‘react-color’;
class ColorPicker extends React.Component {
constructor(props) {
super(props);
this.state = {
color: ‘#000000’
};
}
handleChangeComplete = (color) => {
this.setState({ color: color.hex });
};
render() {
return (
);
}
}
export default ColorPicker;
Finally, we will use the ColorPicker component in our application. To do this, we will import the component and render it in our App component.
import React from ‘react’;
import ColorPicker from ‘./ColorPicker’;
class App extends React.Component {
render() {
return (
);
}
}
export default App;
Now, when you run your application, you should see a color picker that allows you to select a color.
React color picker example; In this tutorial, you will learn how to implement color picker in react js apps.
You must have seen in many web and apps that you can pick the color directly on color picker. You want to add simple color picker to your react app. So in this tutorial you will get step by step guide. With the help of which you can add your react js app simple color picker.
Create Color Picker in React
- Step 1 – Create React App
- Step 2 – Install Bootstrap Library
- Step 3 – Install Color Picker Library
- Step 4 – Create Color Picker Component
- Step 5 – Add Color Picker Component in App.js
Step 1 – Create React App
In this step, open your terminal and execute the following command on your terminal to create a new react app:
npx create-react-app my-react-app
To run the React app, execute the following command on your terminal:
npm start
Check out your React app on this URL: localhost:3000
Step 2 – Install Bootstrap Library
In this step, execute the following command to install Bootstrap library into your react app:
npm install bootstrap --save
Add bootstrap.min.css file in src/App.js file:
import React, { Component } from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<h2>How to create color picker in React</h2>
</div>
);
}
export default App;
Step 3 – Install Color Picker Library
In this step, execute the following command to install color picker library into your react app:
npm install react-color --save
Step 4 – Create Color Picker Component
Create ColorPickerComponent.js file. So, visit the src directory of your react js app and create a table component file named ColorPickerComponent.js. And add the following code into it:
'use strict'
import React from 'react'
import reactCSS from 'reactcss'
import { SketchPicker } from 'react-color'
class ColorPickerComponent extends React.Component {
state = {
displayColorPicker: false,
color: {
r: '241',
g: '112',
b: '19',
a: '1',
},
};
handleClick = () => {
this.setState({ displayColorPicker: !this.state.displayColorPicker })
};
handleClose = () => {
this.setState({ displayColorPicker: false })
};
handleChange = (color) => {
this.setState({ color: color.rgb })
};
render() {
const styles = reactCSS({
'default': {
color: {
width: '36px',
height: '14px',
borderRadius: '2px',
background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`,
},
swatch: {
padding: '5px',
background: '#fff',
borderRadius: '1px',
boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
display: 'inline-block',
cursor: 'pointer',
},
popover: {
position: 'absolute',
zIndex: '2',
},
cover: {
position: 'fixed',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
},
},
});
return (
<div>
<div style={ styles.swatch } onClick={ this.handleClick }>
<div style={ styles.color } />
</div>
{ this.state.displayColorPicker ? <div style={ styles.popover }>
<div style={ styles.cover } onClick={ this.handleClose }/>
<SketchPicker color={ this.state.color } onChange={ this.handleChange } />
</div> : null }
</div>
)
}
}
export default ColorPickerComponent
Step 5 – Add Color Picker Component in App.js
In this step, you need to add ColorPickerComponent.js file in src/App.js file:
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import ColorPickerComponent from './ColorPickerComponent'
function App() {
return (
<div className="App">
<ColorPickerComponent />
</div>
);
}
export default App;
Conclusion
React color picker example; In this tutorial, you have learned how to implement color picker in react js apps.
