Introduction

An enterprise-class UI design language and React UI library with high-quality React components, one of the best React UI libraries for enterprises.

A ColorPicker component provides color selection. It is used when the user needs to customize the color selection.

Preconditions

We cover the below things in this article:

Here we will follow the steps for creating a ColorPicker.

Step 1. Run the below command to create a React.js project.

Code
npx create-react-app my-app --template typescript

Step 2. Run the below command to install Ant Design UI.

Code
npm i @ant-design/icons
npm i antd

Create the files according to the below image.

ColorPicker Using Ant Design UI In ReactJS

Step 3. Add the below code in the App.tsx.

JavaScript
import React from 'react';
import './index.css';
import { ColorPicker } from 'antd';

const App = () => <ColorPicker />;
export default App;

Step 4. Add the below code in package.json

Java
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.34",
    "@types/react": "^18.2.8",
    "@types/react-dom": "^18.2.4",
    "antd": "^5.6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Step 5. Run the below command to run the application.

Code
npm start

After running this command, we will get this ColorPicker.

ColorPicker Using Ant Design UI In ReactJS

Summary

In this article, we learned how to create a ColorPicker using Ant Design UI with React JS and Typescript.