Skip to content
Related Articles

Related Articles

Improve Article

ReactJS UI Ant Design Timeline Component

  • Last Updated : 16 Mar, 2021
Geek Week

Timeline is used to display a series of information that needs to be ordered by time (ascending or descending).

Ant Design Library has this component pre-built, and it is very easy to integrate as well. We can use this Timeline component using the following approach easily.

Syntax:

<Timeline>
      <Timeline.Item>
         Content of the timeline
      </Timeline.Item>
</Timeline>

Timeline Property:

  • mode: This property defines the alignment of the timeline.
  • pending: This property set the last post nodes existence or it’s content.
  • pendingDot: This property set the dot of the last ghost if pending is true.
  • reverse: This property defines that nodes will be reverse or not.

Timeline.Item Property:



  • color: This property defines the color of the timeline item, default is blue.
  • dot: This property defines the customize timeline dot.
  • label: This property set the label.
  • position: This property defines the timeline position.

Creating React Application and Installing Module:

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

    npx create-react-app demo
  • Step 2: After creating your project folder i.e. demo, move to it using the following command.

    cd demo
  • Step 3: After creating the ReactJS application, Install the antd library using the following command.

    npm install antd

Project Structure:

Example: Now write the following code in filename App.js.

App.js




import { Timeline } from "antd";
import "antd/dist/antd.css";
  
function App() {
  return (
    <div className="App">
      <div style={{ padding: "100px" }}>
        <h1 style={{ marginBottom: "2rem" }}>
          Demo for Timeline
        </h1>
        /* Time Creating */
        <Timeline>
          /* Timeline elements*/
          <Timeline.Item>
            Create a services site 2015-09-01
          </Timeline.Item>
          <Timeline.Item>
            Solve initial network problems 2015-09-01
          </Timeline.Item>
          <Timeline.Item>
            Technical testing 2015-09-01
          </Timeline.Item>
          <Timeline.Item>
            Network problems being solved 2015-09-01
          </Timeline.Item>
        </Timeline>
        ,
      </div>
    </div>
  );
}
  
export default App;

Running the application: Run the application by using the following command.

npm start

Output: Now open your browser and go to http://localhost:3000/, You will see the following output.

Reference: https://ant.design/components/timeline/




My Personal Notes arrow_drop_up
Recommended Articles
Page :