react-headless-timeline
v0.3.4TypeScript
⚡️ Headless components for building custom timelines for React
0/weekUpdated 3 years agoMITUnpacked: 9.0 MB
Published by Dawid Zajac
npm install react-headless-timeline⚡️ React Headless Timeline
Headless components for building custom timelines for React. Headless means it doesn't provide any UI for the timeline but only handles the logic. Supports both horizontal and vertical timelines.
$3
---
* ⚡️ Highly performant and efficient
* 🔒 Type safe - written in TypeScript
* 🫧 Doesn't render any UI - it's totally up to you how you're going to style your timeline
* 🏃 Small bundle size
$3
---
See what library does and what doesn't for you to decide whether it's a good fit for you or not.
👍 What it does for you:
* Handles the timeline logic
* Helps you render timeline components in correct position and size
👎 What it doesn't for you:
* It doesn't provide any pre-made UI components for you (no need to overwrite any styles to make timeline looks like in designer's dream)
Still not sure? Check some examples ⬇️
$3
---
* Features
* Overview
* Install
* Quick start
* API
* Timeline.Provider
* Timeline.Headers
* Timeline.Events
* Timeline.Indicators.CurrentTime
* Timeline.Indicators.Time
* General rules
* Examples
* License
$3
---
``bash`
npm install react-headless-timeline
$3
---
`jsx
import Timeline from 'react-headless-timeline';
function App() {
const timelineConfig = {
startDate: new Date(1651201447127), // 29th Apr 2022 05:04:07 CET
endDate: new Date(1651221447127), // 29th Apr 2022 10:37:27 CET
}
const events = [
{
startDate: new Date(1651204649127), // 29th Apr 2022 05:57:29 CET
endDate: new Date(1651214649127), // 29th Apr 2022 08:44:09 CET
},
];
return (
<>
{headers.map((header) => (
{header.getTime()}
))}
)}
/>
{events.map((evt, i) => (
Event
))}
)}
/>
);
}
`
$3
---
* #### Timeline.Provider
Core timeline component. You have to wrap all of your timeline components inside provider.
Props: (* - these are required)
| Name | Type | Default | Description |
|---------|-----------------------------------------|---------------|-----------------------|
| startDate * |
| | |
| endDate * | Date | | |
| direction | "horizontal" / "vertical" | "horizontal" | Determines timeline direction | Example:
`jsx
import Timeline from 'react-headless-timeline';
// ...
{children}
` Other examples: See all ⬇️
----
* #### Timeline.Headers
Provides headers and helper function to generate headers CSS styles (size and position).
Props: (* - these are required)
| Name | Type | Default | Description |
| --- |------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------|
| cells |
| 2 | Determines how many headers/cells you want to render. For example if you have a timeline with startDate set to today 10AM and endDate set to today 4PM, by default headers will be an array with startDate and endDate. But let's say you want to display headers every 1 hour, you should then set cells to 7 - [10AM, 11AM, 12AM, 1PM, 2PM, 3PM, 4PM]. The minimum value is 2 |
| render * | function | | Render your UI inside this function. See example below... | Example:
`jsx
import Timeline from 'react-headless-timeline';
// ...
{headers.map((header) => (
{header.getTime()}
))}
)}
/>
` Other examples: See all ⬇️
---
* #### Timeline.Events
Provides helper function to generate event CSS styles (size and position).
Props: (* - these are required)
| Name | Type | Default | Description |
| --- |-----------|------------|------------------------------------------------------|
| render * |
| | Render your UI inside this function. See example below... | Example:
`jsx
import Timeline from 'react-headless-timeline';
// ...
{events.map((evt, i) => (
Event
))}
)}
/>
` Other examples: See all ⬇️
---
* #### Timeline.Indicators.CurrentTime
Provides current time indicator with updates (re-renders) every second or full minute. This component will re-render itself.
Update every full minute means update at 10:45:00, 10:46:00 and so on...
Props: (* - these are required)
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| updateInterval |
/ "minute" | "minute" | Determines update interval. In most cases you'll want to use "minute" option to limit re-renders |
| render * | function | | Render your UI inside this function. See example below... |
Example:
`jsx
import Timeline from 'react-headless-timeline';
// ...
{currentTime.getTime()}
)}
/>
` Other examples:
* Horizontal with current time indicator
* Horizontal with multiple events and time indicators
* Vertical with current time indicator
* Advanced horizontal work log
---
* #### Timeline.Indicators.Time
This indicator exposes function to position your component properly. It's useful for events without end date.
Props: (* - these are required)
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| render * |
| | Render your UI inside this function. See example below... | Example:
`jsx
import Timeline from 'react-headless-timeline';
// ...
{label}
)}
/>
` Other examples:
* Horizontal with multiple events and time indicators
---
$3
---
* You should use CSS
$3
---
* Basic horizontal
* Basic vertical
* Horizontal with current time indicator
* Horizontal with multiple events
* Horizontal with multiple events and time indicators
* Vertical with current time indicator
* Vertical with multiple events
* Advanced horizontal work log:
* Source code
* Live example
$3
---