How to Create a ColorPicker Component in React?

This article demonstrates How to Create a ColorPicker Component in React.

This code features two React components: ColorPicker.js and App.js, illustrating a simple color picker component and its integration into a larger React application. Let’s break down each part:

ColorPicker.js

import React from 'react';
const ColorPicker = (props) => {
  const style = {
    backgroundColor: props.selectedColor,
    width: '100px',
    height: '100px',
  };
  return (
    <div>
      <h2>Color Picker</h2>
      <div style={style}></div>
      <p>Selected Color: {props.selectedColor}</p>
    </div>
  );
};
export default ColorPicker;

In the ColorPicker component, a functional component is defined that takes two props: selectedColor and onColorChange. Inside the component, an inline style object (style) is created dynamically based on the selectedColor prop, setting the background color, width, and height of a div element. The rendered component includes a heading, a colored square (div with the specified style), and a paragraph displaying the currently selected color.

App.js

// App.js

import React, { useState } from 'react';
import ColorPicker from './ColorPicker';
function App() {
  const [selectedColor, setSelectedColor] = useState('#00ff00'); // Default color is green

  // Handler function to update the selected color
  const handleColorChange = (newColor) => {
    setSelectedColor(newColor);
  };

  return (
    <div className="App">
      <ColorPicker selectedColor={selectedColor} onColorChange={handleColorChange} />
    </div>
  );
}

export default App;

Output

**An Example Demonstrating How to Create a ColorPicker Component in React**

In the App component, the ColorPicker component is imported. The main application state includes a selectedColor state variable and a handleColorChange function to update the selected color. The ColorPicker component is rendered within the main application, passing the selectedColor state as a prop and the handleColorChange function as a callback prop. This setup allows the color picker to display the current color and enables the user to change it through interaction.

In summary, this code demonstrates the implementation of a basic color picker component (ColorPicker.js) and its integration into a React application (App.js). Users can view and modify the selected color through the color picker interface, showcasing a fundamental aspect of dynamic user interfaces in React.

ColorPicker.js

App.js

Further Reading