https://github.com/casperiv0/react-timeline
Reusable react components to create a good looking and responsive timeline out the box!
https://github.com/casperiv0/react-timeline
npm-package react react-timeline timeline
Last synced: about 1 year ago
JSON representation
Reusable react components to create a good looking and responsive timeline out the box!
- Host: GitHub
- URL: https://github.com/casperiv0/react-timeline
- Owner: casperiv0
- License: mit
- Created: 2020-08-30T10:07:33.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-15T08:09:52.000Z (over 4 years ago)
- Last Synced: 2024-10-12T08:09:27.754Z (over 1 year ago)
- Topics: npm-package, react, react-timeline, timeline
- Language: TypeScript
- Homepage: https://npm.im/react-timelinev2
- Size: 232 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Timeline
Reusable react components to create a good looking and responsive timeline out the box!
## Table of contents
- [Installation](#installation)
- [Usage](#usage)
- [Available Props](#available-props)
## Installation
### npm
```bash
npm install react-timelinev2
```
### Yarn
```bash
yarn add react-timelinev2
```
## Usage
```js
import React from "react";
import { Timeline, TimelineItem } from "react-timelinev2";
function App() {
return (
Some text
I will have shadows!
Some text
Some text
);
}
```
## Screenshot
## Playground
## Available Props
### Timeline
| Option | type | description | required |
| ---------- | ------ | --------------------------------------- | -------- |
| timelineBg | string | Set a background color for the timeline | false |
### TimelineItem
| Option | type | description | required |
| ------------- | ------- | -------------------------------------------- | -------- |
| title | string | set the title | true |
| side | string | `left` or `right` | true |
| date | string | set a date | true |
| bgColor | string | set a background color for the timeline item | false |
| bodyTextColor | string | Set a color for the body text | false |
| dateColor | string | Set a color for date | false |
| titleBg | string | Set a background color for the title | false |
| titleColor | string | Set a color for title | false |
| borderRadius | string | Set a border radius for the timeline item | false |
| shadows | boolean | Sets a box-shadow | false |
| hoverShadow | boolean | Sets a box-shadow on hover only | false |
## Supporting react-timelinev2
**All stars/forks are appreciated!**
Made with ❤ and TypeScript
## License
[MIT](./LICENSE)