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

react-event-timeline

v1.6.3

Published

A responsive event timeline in React.js

Downloads

36,880

Readme

react-event-timeline

React component to generate a responsive event timeline.

npm version Build Status codecov license

alt tag

See the storybook demo here: https://rcdexta.github.io/react-event-timeline

CodeSandbox version to play with (in typescript):

Edit Timeline Example

Note: CodeSandbox version has styling and icons loaded in index.html for better presentation!

Features

  • It's lightweight
  • Responsive and extensible

Getting started

To install the dependency

npm install --save react-event-timeline

or if you use yarn

yarn add react-event-timeline

Usage

The following snippet generates the timeline you see in the screenshot:

import {Timeline, TimelineEvent} from 'react-event-timeline'

ReactDOM.render(
    <Timeline>
            <TimelineEvent title="John Doe sent a SMS"
                           createdAt="2016-09-12 10:06 PM"
                           icon={<i className="material-icons md-18">textsms</i>}
            >
                I received the payment for $543. Should be shipping the item within a couple of hours.
            </TimelineEvent>
            <TimelineEvent
                title="You sent an email to John Doe"
                createdAt="2016-09-11 09:06 AM"
                icon={<i className="material-icons md-18">email</i>}
            >
                Like we talked, you said that you would share the shipment details? This is an urgent order and so I
                    am losing patience. Can you expedite the process and pls do share the details asap. Consider this a
                    gentle reminder if you are on track already!
            </TimelineEvent>
    </Timeline>,
      document.getElementById('container')
);

Please refer storybook to check out code for all the examples in the storybook folder.

API Documentation

Timeline

This is the wrapper component that creates the infinite vertical timeline

| Name | Type | Description | | -------------- | ------ | ---------------------------------------- | | className | string | The css class name of timeline container| | style | object | Override inline styles of timeline container | | orientation | string | Display the timeline on right or left. Default: left | | lineColor | string | CSS color code to override the line color | | lineStyle | string | Override the appearance of line with custom css styling |

TimelineEvent

Each event in the timeline will be represented by the TimelineEvent component. There can be multiple repeating instances of this component inside Timeline wrapper

| Name | Type | Description | | ------------ | ------ | ---------------------------------------- | | title | node | The title of the event. Can be string or any DOM element node(s) | | createdAt | node | The time at which the event occurred. Can be datetime string or any DOM element node(s) | | subtitle | node | If you prefer having the title at the top and some caption below, omit createdAt and specify title and subtitle | | icon | node | The icon to show as event lable. Can be a SVG or font icon | | iconStyle | object | Custom CSS styling for the icon | | bubbleStyle | object | Custom CSS styling for the bubble containing the icon | | buttons | node | Action buttons to display to the right of the event content | | contentStyle | node | Override content style | | container | string | Optional value card will render event as a Card | | style | object | Override style for the entire event container. Can be used to modify card appearance if container is selected as card | | titleStyle | object | Override style for the title content | | subtitleStyle | object | Override style for the subtitle content | | cardHeaderStyle | object | Override style for the card header if container is card | | collapsible | boolean | Make the timeline event collapse body content | | showContent | boolean | if collapsible is true, should content be shown by default. false is default value |

TimelineBlip

Use this component if your event footprint is too small and can be described in a single line

| Name | Type | Description | | --------- | ------ | ---------------------------------------- | | title | node | The title of the event. Can be string or any DOM element node(s) | | icon | node | The icon to show as event label. Can be a SVG or font icon | | iconColor | string | CSS color code for icon | | iconStyle | object | Custom CSS styling for the icon | | style | object | Override style for the entire event container |

Refer to Condensed Timeline in Storybook for examples of using this component

Development

This project recommends using react-storybook as a UI component development environment. Use the following scripts for your development workflow:

  1. npm run storybook: Start developing by using storybook
  2. npm run lint : Lint all js files
  3. npm run lintfix : fix linting errors of all js files
  4. npm run build: transpile all ES6 component files into ES5(commonjs) and put it in dist directory
  5. npm run docs: create static build of storybook in docs directory that can be used for github pages

The storybook artefacts can be found in stories folder. Run npm run storybook and you should see your code changes hot reloaded on the browser

Also use semantic-release to automate release to npm. Use npm run commit to commit your changes and raise a PR.

License

MIT