Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More โ†’
Socket
Sign inDemoInstall
Socket

react-chrono

Package Overview
Dependencies
Maintainers
1
Versions
122
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-chrono

A Modern Timeline component for React

  • 1.5.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
6.1K
decreased by-11.33%
Maintainers
1
Weekly downloads
ย 
Created
Source


Build Status DeepScan grade Codacy Badge react-chrono Snyk Vulnerabilities for GitHub Repo Depfu https://badgen.net/bundlephobia/min/react

Features

Table of Contents

โšก Installation

yarn install react-chrono

Getting Started

Please make sure you wrap the component in a container that has a width and height.

When no mode is specified, the component defaults to HORIZONTAL mode. Please check props for all the available options.

  import React from "react"
  import { Chrono } from "react-chrono";
  
  const Home = () => {
    const items = [{
      title: "May 1940",
      cardTitle: "Dunkirk",
      cardSubtitle:"Men of the British Expeditionary Force (BEF) wade out to..",
      media: {
        type: "IMAGE",
        source: {
          url: "http://someurl/image.jpg"
        }
      }
    }, ...];

    return (
      <div style={{ width: "500px", height: "400px" }}>
        <Chrono items={items} />
      </div>
    )
  }

app-home

Vertical Mode

To render the timeline vertically use the VERTICAL mode

  <div style={{ width: "500px", height: "950px" }}>
    <chrono
      items={items}
      mode="VERTICAL"
    />
  </div>

vertical-basic

Vertical Alternating

In VERTICAL_ALTERNATING mode the timeline is rendered vertically with cards alternating between left and right side.

  <div style={{ width: "500px", height: "950px" }}>
    <chrono
      items={items}
      mode="VERTICAL_ALTERNATING"
    />
  </div>

app-tree

Slideshow

Play the timeline automatically with the slideShow mode. This prop enables the play button on the ui controls.

  <div style={{ width: "500px", height: "950px" }}>
    <chrono
      items={items}
      slideShow
      mode="VERTICAL_ALTERNATING"
    />
  </div>

Props

namedescriptiondefault
modesets the mode of the component. can be HORIZONTAL, VERTICAL or VERTICAL_ALTERNATINGHORIZONTAL
itemscollection of Timeline Item Model.[]
disableNavOnKeydisables the keyboard navigation.false
slideShowenables the slideshow control.false
slideItemDurationduration (in ms), the timeline card is active during a slideshow.5000
itemWidthwidth of the timeline section in HORIZONTAL mode.300
hideControlshides the navigation controls.300
cardHeightsets the minimum height of the timeline card.250
scrollablemakes the timeline scrollable (applicable for VERTICAL & VERTICAL_ALTERNATING).true
cardPositionHorizontalpositions the card in HORIZONTAL mode. can be either TOP or BOTTOM
themeprop to customize the colors.

Mode

react-chrono supports three modes HORIZONTAL, VERTICAL and VERTICAL_ALTERNATING. No additional setting is required.

  <chrono items={items} mode="HORIZONTAL" />
  <chrono items={items} mode="VERTICAL" />
  <chrono items={items} mode="VERTICAL_ALTERNATING" />

Timeline item Model

namedescriptiontype
titletitle of the timeline itemString
cardTitletitle that is displayed on the timeline cardString
cardSubtitletext displayed in the timeline cardString
cardDetailedTextdetailed text displayed in the timeline cardString
mediamedia object to set image or video.Object
{
  title: "May 1940",
  cardTitle: "Dunkirk",
  media: {
    name: "dunkirk beach",
    source: {
      url: "http://someurl/image.jpg"
    },
    type: "IMAGE"
  },
  cardSubtitle:
    "Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk."
}

Keyboard Navigation

The timeline can be navigated via keyboard.

  • For HORIZONTAL mode use your LEFT RIGHT arrow keys for navigation.
  • For VERTICAL or VERTICAL_ALTERNATING mode, the timeline can be navigated via the UP DOWN arrow keys.
  • To easily jump to the first item or the last item in the timeline, use HOME or END keys.

To disable keyboard navigation set disableNavOnKey to true.

<chrono items={items} disableNavOnKey />

Scrollable

With the scrollable prop, you can enable scrolling on both VERTICAL and VERTICAL_ALTERNATING modes.

  <chrono items={items} scrollable />

The scrollbar is not shown by default. To enable the scrollbar, pass an object with prop scrollbar to scrollable prop.

  <chrono items={items} scrollable={{scrollbar: true}} />

Media

Both images and videos can be embedded in the timeline. Just add the media attribute to the Timeline Item model and the component will take care of the rest.

To embed a image
{
  title: "May 1940",
  cardTitle: "Dunkirk",
  media: {
    name: "dunkirk beach",
    source: {
      url: "http://someurl/image.jpg"
    },
    type: "IMAGE"
  }
}
To embed a video

Videos start playing automatically when active and will be automatically paused when not active. Like images, videos are also automatically hidden when not in the visible viewport of the container.

{
  title: "7 December 1941",
  cardTitle: "Pearl Harbor",
  media: {
    source: {
      url: "/pearl-harbor.mp4",
      type: "mp4"
    },
    type: "VIDEO",
    name: "Pearl Harbor"
  }
}

media

Slideshow mode

Slideshow can be enabled by setting the slideShow prop to true. You can also set an optional slideItemDuration that sets the time delay between cards.

setting this prop enables the play button in the timeline control panel.

<chrono items={items} slideShow slideItemDuration={4500} />

Item Width

The itemWidth prop can be used to set the width of each individual timeline sections. This setting is applicable only for the HORIZONTAL mode.

Theme

Customize colors with theme prop.

<chrono items={items}  theme={{primary: "red", secondary: "blue" }} />

๐Ÿ“ฆ CodeSandbox Examples

๐Ÿ”จ Build Setup

# install dependencies
yarn install

# start dev setup
yarn run start

# run css linting
yarn run lint:css

# eslint
yarn run eslint

# prettier
yarn run lint

# package lib
yarn run rollup

๐Ÿงช Tests

  # run unit tests
  yarn run test

  # run cypress tests
  yarn run cypress:test

๐Ÿค Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b new-feature)
  3. Commit your changes (git commit -am 'Add feature')
  4. Push to the branch (git push origin new-feature)
  5. Create a new Pull Request

๐Ÿงฑ Built with

๐ŸŽฏ What's coming next

  • Support for Mobile devices & Tablets (responsive).
  • Rendering custom content in timeline cards.

Meta

Prabhu Murthy โ€“ @prabhumurthy2 โ€“ prabhu.m.murthy@gmail.com

Distributed under the MIT license. See LICENSE for more information.

https://github.com/prabhuignoto

Keywords

FAQs

Package last updated on 02 Nov 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with โšก๏ธ by Socket Inc