🎉 dnd-timeline

dnd-timeline: A headless timeline library, based on dnd-kit

• 🧠 Headless: dnd-timeline is a headless-ui library, and contains 0 styling, aside from functional styling (position, z-index, etc.).
• 🪝 Hook-based : exposes simple hooks like useItem and useRow, that should integrate seamlessly into your existing architecture.
• 🤺 Flexible: very slim and flexible by design. dnd-timeline exposes utility functions and positional styling, and you can use them in conjunction with you favorite libraries - styling libraries (MUI, tailwindcss, ant-design, etc.), and functional libraries (react-virtual, framer-motion, etc.)
• 🏗️ Based on dnd-kit : all features exposed by the dnd-kit library are applicable to dnd-timeline.
• 🏎️ Performant: renders only when needed. All the intermediate states and animations are done using css transformations, and require 0 re-renders.
• 👆 Touch Support: Works with touch by default. Sensors can be highly configured using dnd-kit's sensors.
• 🌍 RTL: dnd-timeline nativly supports RTL. simply declare one of the parent divs as rtl with dir="rtl", and thats it.

Installation

The library requires a single peer-dependency: react

To install it, run:

npm install react

Then, you can install the library itself:

npm install dnd-timeline

Examples

• External: Drag items from outside to the timeline, from one timeline to another, nest timelines in each other... What ever you want!
• Timeaxis: Add custom components using the timeline's data, for example a timeaxis with custom labels.
• Sortable: Allow for sortable rows.
• Virtual: Render thousands of items and rows using your favorite virtualization library.
• Grouped: Group the rows in any way you like.
• Grouped: Group the rows in any way you like.

💡 These are just a few examples of what can be done with this library.

I invite you to share your ideas, and challange the library with any idea you come up with by opening a discussion here.

Contribution

This project uses turborepo to manage the monorepo. It also uses pnpm instead of npm as a package manager.

To install pnpm, you can run:

corepack enable pnpm

If you want to develop on your local machine, simply clone the project, and run

pnpm install
pnpm run dev

And all the examples will run on your local machine, likned to the local instance of the library. Any changes made to the library will be reflected in the examples.

If you want to run only a specific example, checkout turborepo's --filter operator:

pnpm run dev --filter home...

For example this will run the home package and all the packages' it is depending on (dnd-timeline).

Good luck 🤞