@bearei/react-timeline

react-timeline

Base timeline components that support React and React native

Installation

yarn add @bearei/react-timeline --save

Parameters

Name	Type	Required	Description
items	BaseTimeLineItemProps	✘	Timeline items
renderMain	(props: TimeLineMainProps) => ReactNode	✔	Render the timeline main
renderContainer	(props: TimeLineContainerProps) => ReactNode	✔	Render the timeline container

Timeline Item

Name	Type	Required	Description
content	ReactNode	✘	Timeline content
dot	ReactNode	✘	Custom timeline points
renderMain	(props: TimeLineItemMainProps) => ReactNode	✔	Render the timeline item main
renderContainer	(props: TimeLineItemContainerProps) => ReactNode	✔	Render the timeline item container

Use

import React from 'React';
import ReactDOM from 'react-dom';
import Tag from '@bearei/react-time-line';

const timeline = (
  <Timeline
    items={[{ content: '1' }]}
    renderMain={({ items, ...props }) => (
      <div>
        {items?.map((item, index) => (
          <TimelineItem
            {...item}
            key={index}
            renderMain={({ content }) => <div>{content}</div>}
            renderContainer={({ children }) => <div>{children}</div>}
          />
        ))}
      </div>
    )}
    renderContainer={({ id, children }) => (
      <div data-id={id} tabIndex={1}>
        {children}
      </div>
    )}
  />
);

ReactDOM.render(timeline, container);