# react-tailwind-timeline-component
> Highly customizable React Timeline component
Latest version **1.1.2** (published 2022-06-02) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-tailwind-timeline-component
pnpm add react-tailwind-timeline-component
yarn add react-tailwind-timeline-component
bun add react-tailwind-timeline-component
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.2 |
| Published | 2022-06-02 |
| First published | 2022-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 26 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Mehmet Tetik |
| Maintainers | mtetik |
| Keywords | react, timeline, tailwindcss, react-timeline, react-tailwindcss, react-timeline-component, react-tailwindcss-timeline, react-tailwindcss-timeline-component |
## Links
- npm: https://www.npmjs.com/package/react-tailwind-timeline-component
- Repository: https://github.com/mtetik98/react-timeline-component
- Issues: https://github.com/mtetik98/react-timeline-component/issues
- npm.io page: https://npm.io/package/react-tailwind-timeline-component
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.1.2 (latest) — 2022-06-02
- 1.1.1 — 2022-06-02
- 1.1.0 — 2022-06-02
- 1.0.6 — 2022-06-02
- 1.0.5 — 2022-06-02
- 1.0.4 — 2022-06-02
- 1.0.3 — 2022-06-02
- 1.0.2 — 2022-06-02
- 1.0.1 — 2022-06-02
- 1.0.0 — 2022-06-02
- 0.0.7 — 2022-06-01
- 0.0.6 — 2022-06-01
- 0.0.2 — 2022-06-01
## README
# React Tailwind Timeline Component
[](https://www.npmjs.com/package/react-tailwind-timeline-component)
[](https://www.npmjs.com/package/react-tailwind-timeline-component)
[](https://www.npmjs.com/package/react-tailwind-timeline-component)
[](https://github.com/mtetik98/react-tailwind-timeline-component/blob/main/LICENSE)
[](https://www.buymeacoffee.com/mtetik98)
---
Render a timeline with React and Tailwind CSS in your React project.
**React Tailwind Timeline Component** is a **highly customizable** timeline component that works **perfect** with Tailwind CSS.
> **⚠️ DISCLAIMER**
>
> Using this package does not mean you are using Tailwind CSS nor any icon package. You should import your own icon package and install Tailwind CSS yourself.
#### Try it yourself!
- [React Sandbox Demo](https://codesandbox.io/s/react-example-react-tailwind-timeline-component-ig85hb)
## Install
```bash
npm install react-tailwind-timeline-component
```
## Usage
### With ``Timeline``
Use ``Timeline`` component to render a **sorted** timeline. Notice that you should pass a ``date`` property to the timeline events and those that do have this property, will be sorted.
```js
// App.js
import { Timeline, EventTimeline } from "react-tailwind-timeline-component";
// Disclaimer: This icon package is used as example only.
import { FaTasks } from "react-icons/fa";
export default function App() {
return (
}
date={new Date(2022, 5, 15)}
/>
}
date={new Date(2022, 5, 1)}
/>
}
date={new Date(2022, 5, 30)}
/>
);
}
```
### Without ``Timeline``
If you do not require a sorted timeline, you can use the ```` component without the ```` component.
```js
// App.js
import { Timeline, EventTimeline } from "react-tailwind-timeline-component";
// Disclaimer: This icon package is used as example only.
import { FaTasks } from "react-icons/fa";
export default function App() {
return (
}
/>
}
/>
}
/>
);
}
```
## Types
### ``Timeline``
| Property | Description | Required | Type | Default Value |
|----------|-------------|:----:|------|---------------|
| children | Timeline events | ✔️ | ``ReactNode`` | - |
| className | Class name of the timeline | ❌ | ``string`` | - |
| sort | Whether to sort timeline events | ❌ | ``boolean`` | ``true`` |
| ascending | Whether to sort timeline events in ascending order | ❌ | ``boolean`` | ``true`` |
| beforeUndatedContent | Whether to display the sorted events before any other content that does not have a ``date`` property | ❌ | ``boolean`` | ``true`` |
### ``EventTimeline``
| Property | Description | Required | Type | Default Value |
|----------|-------------|:----:|------|---------------|
| title | Title of the timeline event | ✔️ | ``string`` | - |
| description | Description of the timeline event | ✔️ | ``string`` | - |
| icon | Icon of the timeline event | ✔️ | ``ReactNode`` | - |
| date | Date of the timeline event | ❌ | ``Date`` | - |
| className | Class name of the timeline event | ❌ | ``string`` | - |
| showLine | Whether to show a line between the timeline event and the previous one | ❌ | ``boolean`` | ``true`` |
| showIcon | Whether to show the icon of the timeline event | ❌ | ``boolean`` | ``true`` |
| leftSideContent | Content to be displayed on the left side of the timeline event | ❌ | ```string \|\| ReactNode ``` | - |
| leftSideContentClassName | Class name of the left side content | ❌ | ``string`` | - |
| rightSideContent | Content to be displayed on the right side of the timeline event | ❌ | ```string \|\| ReactNode ``` | - |
| rightSideContentClassName | Class name of the right side content | ❌ | ``string`` | - |
| titleClassName | Class name of the title of the timeline event | ❌ | ``string`` | - |
| lineClassName | Class name of the line between the timeline event and the previous one | ❌ | ``string`` | - |
| iconBackgroundClassName | Class name of the background of the icon of the timeline event | ❌ | ``string`` | - |
| cardClassName | Class name of the card (details) of the timeline event | ❌ | ``string`` | - |
| darkMode | Whether to use dark mode | ❌ | ``boolean`` | ``false`` |
| onIconClick | Callback to be executed when the icon of the timeline event is clicked | ❌ | ``function`` | - |
| onTitleClick | Callback to be executed when the title of the timeline event is clicked | ❌ | ``function`` | - |
| onCardClick | Callback to be executed when the card of the timeline event is clicked | ❌ | ``function`` | - |
| onLeftSideContentClick | Callback to be executed when the left side content of the timeline event is clicked | ❌ | ``function`` | - |
| onRightSideContentClick | Callback to be executed when the right side content of the timeline event is clicked | ❌ | ``function`` | - |
## License
The **React Tailwind Timeline Component** is licensed under MIT.
## Motivation
Due to the fact that there are a few timeline components out there, I decided to create my own. I wanted to create a timeline component that works perfectly with Tailwind CSS. I also wanted to create a timeline component that is **highly customizable** and **easy to use**.
## Links
- [React Demo](https://codesandbox.io/s/react-example-react-tailwind-timeline-component-ig85hb)
- [NPM Package](https://www.npmjs.com/package/react-tailwind-timeline-component)
- [Source code](https://github.com/mtetik98/react-timeline-component)
---
_Source: https://npm.io/package/react-tailwind-timeline-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._