Ant Design

Ant Design is a React UI library that contains easy-to-use components that are useful for building interactive user interfaces. It is very easy to use as well as integrate. It is one of the smart options to design web applications using react. It provides us with high-quality components which can be used with ease.

Installing Ant Design: We can install it using npm. To install it, first make sure you have installed Node.js and npm.

Using npm: Command to install And Design using npm:

npm install antd

Using yarn: Command to install Ant Design using yarn:

yarn install antd

Let’s understand the working of Ant design using an example.

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install antd

Project Structure: It will look like the following.

Now write down the following code in the App.js file to create timepicker using ReactJS UI Ant Design TimePicker Component. Here, App is our default component where we have written our code.

import React from 'react'
import "antd/dist/antd.css";
import { TimePicker } from 'antd';

export default function App() {

return (
    <div style={{
    display: 'block', width: 700, padding: 30
    }}>
    <h4>ReactJS Ant-Design TimePicker Component</h4>
    <>
        <TimePicker onChange={(time) => console.log(time)} />,
    </>
    </div>
);
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and visit http://localhost:3000/, you will see the following output:

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above