@darkhan20021/seat-planner-timeline
v0.0.4
Published
React Beautiful Timeline is a resposive timeline with animations that allows users to switch between vertical and horizontal orientations.
Downloads
1
Readme
React Beautiful Timeline
React Beautiful Timeline is a resposive timeline with animations that allows users to switch between vertical and horizontal orientations.
Features
🚥 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.
Installation
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";
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.
- 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
Author ✨
💻 MEVLÜT CAN TUNA
Licence
This project is licensed under the MIT License.