npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vertical-timeline-reactjs

v1.0.7

Published

A simple component for create a vertical timeline with Reactjs

Downloads

73

Readme

vertical-timeline-component-react

A simple component to generate a responsive vertical timeline Vertical Timeline Component React

Status

Coverage Status Version Build Status Dependencies devDependencies Status peerDependencies Status

Getting started

To install as npm dependency

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 | node | false | en, es or de | en | Change the language from and to texts and change the format in the dates | | dateFormat | string | false | L, l or ll | L | Change the presentation format of dates |

dateFormat: Receive only one of three options. (The options are same the moment.js using).

  • The option L will return a date like MM/DD/YYYY (in English), DD/MM/YYYY (in Spanish) DD.MM.YYYY (in German).
  • The option l will return a date like M/D/YYYY (in English), D/M/YYYY (in Spanish) D.M.YYYY (in German).
  • The option ll will return a date like MMM DD, YYYY (in English), DD de MMM, YYYY (in Spanish) DD. MMM YYYY (in German).

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 firts 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:

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(
   <Timeline theme={customTheme} dateFormat='ll'>
    <Container>
     <YearContent startDate='2020/07/01' currentYear />
     <BodyContent>
      <Section title='Title'>
       <Description variant='subtitle' text='Subtitle' />
       <Description text='Description' />
       <Description text='Another description' />
      </Section>

      <Section title='Another title'>
       <Description text='Description' />
       <Description text='Another description' />
      </Section>
     </BodyContent>
    </Container>
   </Timeline>,
  );
 }
}

Using function components:

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 (
  <Timeline theme={customTheme} dateFormat='ll'>
   <Container>
    <YearContent startDate='2020/07/01' currentYear />
    <BodyContent>
     <Section title='Title'>
      <Description variant='subtitle' text='Subtitle' />
      <Description text='Description' />
      <Description text='Another description' />
     </Section>

     <Section title='Another title'>
      <Description text='Description' />
      <Description text='Another description' />
     </Section>
    </BodyContent>
   </Container>
  </Timeline>
 );
};

License

MIT