React Timeline
This is a simple but fully customizable react component which you can use on your website for displaying timelines.
Installation
Use the package manager yarn or npm .
yarn add react-tree-timeline npm install --save react-tree-timeline
Usage
The simplest form.
;;; ; ReactDOM.renderApp /, app;
You will get this, but it all depends on your customization now.
Styling & Props
For a full customization, understand the component structure.
Customizing the Wrapper (wrapperClassName)
Pass a customized css class name to wrapperClassName prop. By default, it is a display: flex
with justify-content: center
to center the component. Override as you please.
Timeline data= wrapperClassName="wrapper" /
and in your css
Customizing the Timeline (timelineClassName)
Pass a customized css class name to timelineClassName prop
Timeline data= timelineClassName="timeline" /
and in your css
Customizing the Timeline Item (timelineItemClassName)
Pass a customized css class name to timelineItemClassName prop
Timeline data= timelineClassName="timelineItem" /
and in your css
Customizing the Date (dateClassName)
Pass a customized css class name to dateClassName prop
Timeline data= dateClassName="date" /
and in your css
Customizing the Title (titleClassName)
Pass a customized css class name to titleClassName prop
Timeline data= titleClassName="title" /
and in your css
Customizing the Description (descriptionClassName)
Pass a customized css class name to descriptionClassName prop
Timeline data= descriptionClassName="description" /
and in your css
Customizing the Bar (uses the timelineClassName ::before selector )
Pass css class name to timelineClassName prop and customize the ::before selector
Timeline data= timelineClassName="timeline" /
and in your css
Customizing the Node (uses the dateClassName ::after selector )
Pass css class name to dateClassName prop and customize the ::after selector
Timeline data= dateClassName="date" /
and in your css
Example
;;; ; ReactDOM.renderApp /, app;
css
Extra (Animation)
To animate this component, you need to install and configure the AOS animation library in your project.
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.