In this article, we will learn how to use the color picker in reactjs.
-we will use the react-color-palette package for the color picker.
Let’s build a React application.
–First of all, we have create react application.
–Then create an App.js file inside the src directory.
-After creating the App.js application, Install the required module using the below command.
npm install react-color-palette
-add the below code in the app.js file:
color picker props:
width – width of the color picker
height – the height of the color picker
color – the current color
onChange – a function that updates Color.
hideHSV- Hide HSV input.
dark – color picker theme
color:
RGB – colorRGB
hsv- colorHSV
hex – string
import { ColorPicker, useColor } from 'react-color-palette';
import 'react-color-palette/lib/css/styles.css';
import React from 'react';
export default function ColorPickerGfg() {
const [newColor, setNewColor] = useColor('hex', '#999889');
return (
<div>
<h1>Color Picker</h1>
<ColorPicker
width={456}
height={228}
color={newColor}
onChange={setNewColor}
hideHSV
dark
/>
;
</div>
);
}
The react-color-palette package is used in the example above to import the ColorPicker and the CSS file for our colour picker. After that, the initial colour is set utilising our useColor() hook. Then, using the ColorPicker feature of the loaded package, we will add our colour picker.
output:
