https://github.com/mailtop/horizontal-timeline
Horizontal timeline component
https://github.com/mailtop/horizontal-timeline
material-ui react react-dom react-icons
Last synced: 4 months ago
JSON representation
Horizontal timeline component
- Host: GitHub
- URL: https://github.com/mailtop/horizontal-timeline
- Owner: mailtop
- License: mit
- Created: 2019-03-29T12:41:10.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:46:17.000Z (about 3 years ago)
- Last Synced: 2025-04-24T18:51:53.973Z (11 months ago)
- Topics: material-ui, react, react-dom, react-icons
- Language: JavaScript
- Homepage: https://www.npmjs.com/@mailtop/horizontal-timeline
- Size: 822 KB
- Stars: 30
- Watchers: 2
- Forks: 7
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# horizontal-timeline
A React component to create horizontal timelines
**Attention**: *this dependency requires* [Material-UI](https://material-ui.com/)
## Installation
```
npm install --save @mailtop/horizontal-timeline
```
or
```
yarn add @mailtop/horizontal-timeline
```
## Usage
The following snippet generates the timeline you see in the first screenshot - [`react-icons`](https://react-icons.netlify.com/#/) required
To make it like the second screenshot set the property `variant` to `"simple"`, on the `Timeline` component, and to make it like the third one set it to `"small"`
```jsx
import { Timeline, TimelineEvent } from '@mailtop/horizontal-timeline'
import { FaBug, FaRegCalendarCheck, FaRegFileAlt } from 'react-icons/fa'
window.alert('Erro!')
}}
/>
```
## API
### Timeline
Renders a `div` with the same width as the parent element and creates a horizontal scrollbar according to the number of events
**Props:**
**# variant:** defines what type of `Timeline` will be rendered. The screenshots above shows the `default`, `simple` and `small` respectively. When `small` or `simple` are choose, the event `title` and `subtitle` are shown on a tooltip and the `action`, if set, is fired when you click the circle
**# height:** set the size of the component. Default values, accordingly to `variant`:
*-small:* `95px`
*-simple:* `135px`
*-default:* `265px`
**# minEvents:** used to render placeholders for events, if `placeholder` is set to `true`, as shown in the screenshots above
**# maxEvents:** limit the number of events showed on screen
**# placeholder:** create the placholders when `minEvents` is defined
### TimelineEvent
Renders events inside the `Timeline` wrapper. Any number of these can be created*
**Props**
**# color:** set the color of the event. Default value: `#e0e0e0`
**# icon:** renders the icon that identifies the event
**# title:** renders the main text below the event; if a `string` is provided, you can alter it's properties with the prop `titleProps` **OR** you can pass an `element type` - a React component or a HTML component - fully customized
**# titleProps:** an `object` containing any of the [`Typography` props](https://material-ui.com/pt/api/typography/) from `@material-ui`
**# subtitle:** renders the secondary text below the event; if a `string` is provided, you can alter it's properties with the prop `subtitleProps` **OR** you can pass an `element type` - a React component or a HTML element - fully customized
**# subtitleProps:** an `object` containing any of the [`Typography` props](https://material-ui.com/pt/api/typography/) from `@material-ui`
**# action:** the action may be an `element type` - a React component or a HTML element - **OR** an `object` with these two properties:
*-label:* the text inside the button showed below the event
*-onClick:* the action fired when the user click the button or the event, if `simple` or `small` is set to `true` in the `Timeline` component
**\*** *if* `maxEvents` *is set on the* `Timeline` *component, the number of events showed on screen will be limited to that ammount*
## Development
1. Clone the repository `git clone git@github.com:mailtop/horizontal-timeline.git`
2. Run `yarn start`
3. Access `http://localhost:3001`*
**\*** the example page is located in `/examples/src/App.js`