/React-Customizable-Timeline

Primary LanguageTypeScriptMIT LicenseMIT

React-Customizable-Timeline

PRs Welcome code style: prettier Issues license

Getting Started

$ npm i react-customizable-timeline

You might also need to install peer dependencies

$ npm i styled-components react-awesome-reveal react-spring

How to use

First thing first, check out this DEMO!

Step 1: Import the component

import Timeline from 'react-customizable-timeline';

Step 2: Use it in your amazing application! For example:

<Timeline
  data={data}
  primaryDarkColor='black'
  primaryLightColor='white'
  titleShape='circle'
  dotShape='diamond'
  lineStyle='dotted'
  primaryFont='monospace'
  animation={true}
/>

Configuration

Data Format

Data is an array of objects and the format MUST be like this:

const data = [
  {
      title: 'TITLE 1',
      events: [
          {
            title: 'EVENT TITLE',
            subtitle: 'EVENT SUBTITLE',
            content:'CONTENT',
            location: 'LOCATION',
            label: '#LABLE1 #LABLE2',
            img: {
                url:
                    'https://images.unsplash.com/photo-1600790078201-5490baf711d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
                alt: 'pic',
               },
          }]
    },
    ]

Please note that besides events[title], everything is optional!

Component Settings

Property Type Required Default Options
animation Boolean Optional true true/false
primaryDarkColor String Optional #625261
primaryLightColor String Optional #F5F5DC
primaryFont String Optional 'Chivo', sans-serif
titleShape String Optional circle circle/square/rectangular/diamond
dotShape String Optional circle circle/square/line/diamond
lineStyle String Optional dotted solid/dotted/dashed/hidden

Contributing

To contribue please read the CONTRIBUTING.md

Contributors

License

This project is licensed under the MIT License - see the LICENSE.md file for details.