vertical-timeline-component-react

A simple component to generate a responsive vertical timeline

![Vertical Timeline Component React](https://i.imgur.com/KBqLIlK.png 'How to see vertical-timeline-component-react') ## Status ![PRs welcome](https://img.shields.io/badge/PRs-welcome-green) [![Coverage Status](https://coveralls.io/repos/github/Proskynete/vertical-timeline-component-react/badge.svg?branch=unit-tests)](https://coveralls.io/github/Proskynete/vertical-timeline-component-react?branch=unit-tests) [![Version](https://img.shields.io/npm/v/vertical-timeline-component-react.svg)](https://www.npmjs.com/package/vertical-timeline-component-react) [![Build Status](https://travis-ci.org/Proskynete/vertical-timeline-component-react.svg?branch=master)](https://travis-ci.org/Proskynete/vertical-timeline-component-react) [![Package Quality](https://packagequality.com/shield/vertical-timeline-component-react.svg)](https://packagequality.com/#?package=vertical-timeline-component-react)

Table of contents
  1. Getting started
  2. API Documentation
  3. How to use it
  4. Contributors

Getting started

To install as npm dependency ```sh npm install --save vertical-timeline-component-react ```

🔝

API Documentation

Timeline

This is the wrapper component that creates the vertical timeline. - Childrens | Number of children | Required | Value Allowed | | ------------------ | ---------------------------------------------------- | --------------------------- | | Many | At least the first `Container` component is required | Only `Container` components | - Props | name | Type | Required | Values Allowed | default values | Description | | ---------- | ------ | -------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | theme | object | false | colors | { yearColor: "#888888", lineColor: "#c5c5c5", dotColor: "#c5c5c5", borderDotColor: "#ffffff", titleColor: "#cccccc", subtitleColor: "#888888", textColor: "#cccccc" } | Set colors in all components | | lang | string | false | `en`, `es`, `de`, `tr` or `zh_CN` | `en` | Change the language `from` and `to` texts and change the format in the dates | | dateFormat | string | false | `only-number`, `short`, `with-weekday` or `full` | `only-number` | Change the presentation format of dates | `dateFormat`: Receive only one of four options (The options are same the [moment.js](https://momentjs.com/) using) | | `only-number` | `short` | `with-weekday` | `full` | | :--------------------------: | ------------- | ---------------- | ----------------------- | ------------------------------ | | English (`en`) | `MM/D/YYYY` | `MMM DD, YYYY` | `ddd, MMM DD, YYYY` | `dddd, MMMM DD, YYYY` | | Spanish (`es`) | `D/MM/YYYY` | `DD MMM YYYY` | `ddd, DD [de] MMM YYYY` | `dddd, DD [de] MMMM [de] YYYY` | | German (`de`) | `D.MM.YYYY` | `DD.MMM.YYYY` | `ddd., DD. MMM. YYYY` | `dddd, DD. MMMM YYYY` | | Turk (`tr`) | `DD.MM.YYYY` | `DD MMM YYYY` | `DD MMM YYYY ddd` | `DD MMMM YYYY dddd` | | Simplified Chinese (`zh_CN`) | `YYYY/MM/D` | `YYYY年MM月DD日` | `YYYY年MMM月DD日` | `YYYY年MM月DD日dddd` |

Container

Each event in the timeline will be represented by the `Content` component. This component receive only two children's, the first is `YearContent` and the second is `BodyContent`. There can be multiple repeating instances of this component inside `Timeline` wrapper. - Childrens | Number of children | Required | Value Allowed | | ------------------ | -------- | ------------------------------- | | 2 | true | `YearContent` and `BodyContent` |

YearContent

For each `Container` you need `YearContent` (like first children) since with this component you mark the events in the given year. - Props | Name | Type | Required | Values Allowed | default values | Description | | ----------- | ------- | -------- | --------------------------------- | -------------- | -------------------------------------------------------------------------------- | | startDate | string | true | `YYYY/MM/DD` - `YYYY/MM` - `YYYY` | does not apply | The date of the start of the content or contents | | endDate | string | false | `YYYY/MM/DD` - `YYYY/MM` - `YYYY` | does not apply | The date of the end of the content or contents | | currentYear | boolean | false | `true` or `false` | current year | The value is the current year, it is recommended to use it in the last Container |

BodyContent

For each `Container` you need `ContentBody` (like second children). This component will be the container of the one or more `Sections`. - Childrens | Number of children | Required | Value Allowed | | ------------------ | -------------------------------------------------- | ------------------------- | | Many | At least the first `Section` component is required | Only `Section` components |

Section

This component is the container for one or more `Description`. - Childrens | Number of children | Required | Value Allowed | | ------------------ | ------------------------------------------------------ | ----------------------------- | | Many | At least the first `Description` component is required | Only `Description` components | - Props | Name | Type | Required | Description | | ----- | ------ | -------- | ----------------------------- | | title | string | true | It's the title of any section |

Description

This component can be the text of the description or a subtitle - Props | Name | Type | Required | Values Allowed | default values | Description | | ------- | ------ | -------- | --------------------------- | -------------- | ------------------------------------- | | variant | string | false | `subtitle` or `description` | `description` | Transform the format of the text | | text | string | true | Any text | does not apply | Show the description of the `Section` |

🔝

How to use it

The following snippet will show you how to use the library: **_Using class components:_** ```js import { Timeline, Container, YearContent, BodyContent, Section, Description, } from 'vertical-timeline-component-react'; const customTheme = { yearColor: '#405b73', lineColor: '#d0cdc4', dotColor: '#262626', borderDotColor: '#d0cdc4', titleColor: '#405b73', subtitleColor: '#bf9765', textColor: '#262626', }; class Main extends Component { render() { return(
, ); } } ``` **_Using function components:_** ```js import { Timeline, Container, YearContent, BodyContent, Section, Description, } from 'vertical-timeline-component-react'; const Main = () => { const customTheme = { yearColor: '#405b73', lineColor: '#d0cdc4', dotColor: '#262626', borderDotColor: '#d0cdc4', titleColor: '#405b73', subtitleColor: '#bf9765', textColor: '#262626', }; return (
); }; ```

🔝

Contributors

🔝

License

MIT

🔝