React Beautiful Timeline is a resposive timeline with animations that allows users to switch between vertical and horizontal orientations.
-
🚥 Versatile Display: Render timelines in both
Horizontal
andVertical
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.
Using npm
- Install the package:
npm install react-beautiful-timeline
- Import the timeline styles in your main JavaScript file:
import "react-beautiful-timeline/dist/style.css";
Example:
<Timeline>
<TimelineItem>TimelineContent</TimelineItem>
<TimelineItem>TimelineContent</TimelineItem>
<TimelineItem>TimelineContent</TimelineItem>
</Timeline>
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 |
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 |
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.
- Fork it
- Create your feature branch (
git checkout -b new-feature
) - Commit your changes (
git commit -am 'Add feature'
) - Push to the branch (
git push origin new-feature
) - Create a new Pull Request
💻 MEVLÜT CAN TUNA
This project is licensed under the MIT License.