react-timeline-vertical-navigation

Navigate in time same way as Google Photos.

timeline-vertical-navigation React.js version

Built with StencilJS

Install

yarn add react-timeline-vertical-navigation

or with npm

npm add react-timeline-vertical-navigation

Properties

| Property | Attribute | Description | Type | Default | | -------------------- | ------------------ | ----------- | ------------------ | ----------- | | darkmode | darkmode | | boolean | false | | dates (required) | dates | | Date[] or string | undefined | | opaquebackground | opaquebackground | | boolean | false | | pinned | pinned | | boolean | false |

Events

| Event | Description | Type | | -------------- | ----------- | ------------------- | | dateSelected | | CustomEvent<Date> |

Methods

updateSelectedDate(date: Date) => void

Example (source)

For the demo, there is an "ItemsGrid" component you can find in source, this is an example of what your scrollable component could be.

import React from "react";
import {
  ItemsGrid,
  TimelineVerticalNavigation,
} from "react-timeline-vertical-navigation";

function App() {
  const getRandomDate = () => {
    const start = new Date(2000, 0, 1);
    const end = new Date();
    return new Date(
      start.getTime() + Math.random() * (end.getTime() - start.getTime())
    );
  };
  const dates = [];
  for (let i = 0; i < 50; i++) {
    dates.push(getRandomDate());
  }
  const timelineVerticalNavigation = React.createRef();
  const itemsGrid = React.createRef();
  return (
    <>
      <TimelineVerticalNavigation
        ref={timelineVerticalNavigation}
        dates={dates}
        onDateSelected={(event) => {
          itemsGrid.current.scrollToDate(event.detail);
        }}
      />
      <ItemsGrid
        ref={itemsGrid}
        dates={dates}
        onScrolledToDate={(event) => {
          const firstDateVisible = event.detail;
          timelineVerticalNavigation.current.updateSelectedDate(
            firstDateVisible
          );
        }}
      />
    </>
  );
}

export default App;

Online demo