React Beautiful Timeline

React Beautiful Timeline is a resposive timeline with animations that allows users to switch between vertical and horizontal orientations.

Demo

Features

• 🚥  Versatile Display: Render timelines in both Horizontal and Vertical modes, providing flexibility in presentation.

• 📺  Auto Animation: Enjoy the seamless experience of auto-starting animations when the timeline enters the viewport.

• 🔧  Easy Customization: Effortlessly render custom content with straightforward customization options.

• 🎭  Component Flexibility: Customize every component with ease, allowing you to tailor the appearance to your specific needs.

• 🖼️  Custom Icons: Enhance visual appeal by using custom icons within the dots of the timeline.

• 💪  TypeScript Integration: Benefit from the advantages of Typescript for enhanced code reliability.

• 🎨  TailwindCSS Styling: Achieve a sleek and modern design with styling powered by TailwindCSS.

Installation

Using npm

1. Install the package:

  npm install react-beautiful-timeline

2. Import the timeline styles in your main JavaScript file:

  import "react-beautiful-timeline/dist/style.css";

Usage

Example:

<Timeline>
  <TimelineItem>TimelineContent</TimelineItem>
  <TimelineItem>TimelineContent</TimelineItem>
  <TimelineItem>TimelineContent</TimelineItem>
</Timeline>

<Timeline/> Props

Below are the available configuration options for the component:

| Name | Type | Description | | ------------------- | ------------------------------ | ----------------------------------------------------------------- | | type | 'vertical' or 'horizontal' | Specifies the orientation of the timeline (default is horizontal) | | animation | boolean | Enables/disables animation for the timeline (default is true) | | activeLineStyle | CSSProperties | Custom CSS properties for styling the active line | | passiveLineStyle | CSSProperties | Custom CSS properties for styling the passive line | | animationDuration | number | Duration of the animation in milliseconds (default is 6000ms) | | responsiveWidth | number | Switch the orientation of the timeline at responsiveWidth |

<TimelineItem/> Props

Below are the available configuration options for the component:

| Name | Type | Description | | ---------- | -------------------------- | ------------------------------------------------------------------ | | dotColor | string | Color of the dot in the TimelineItem | | place | 'normal' or 'opposite' | Specifies the orientation of the timeline item (default is normal) | | dotIcon | any | Custom content to be placed inside the dot | | dotStyle | CSSProperties | CSS properties to customize the style of the dot | | dotText | any | Custom content to be placed above or beside the dot |

🤝Contributing

We welcome contributions! If you find a bug or have an idea for improvement, please open an issue or submit a pull request on Github.

1. Fork it
2. Create your feature branch (git checkout -b new-feature)
3. Commit your changes (git commit -am 'Add feature')
4. Push to the branch (git push origin new-feature)
5. Create a new Pull Request

Author ✨

💻   MEVLÜT CAN TUNA

• LinkedIn
• Github

Licence

This project is licensed under the MIT License.