eon-timeline v0.1.0

👷🏼‍♂️ Work in progres, in a very alpha version. Use it in your own terms or contribute here.

Key Features

• Headless timeline renderer.
  • Library only provides positions to create your own timeline.
  • You can use React, Vue, Svelte, or others libraries/frameworks to create timeline components.
• Performant.
  • You can create timelines with a large quantity of items, only those which are in current timeline will be provided to be rendered.
• Update timelines in real-time:
  • Remove items.
  • Add new items.
  • Update items.
• Responsive by default.
• Scrollable.
• Simple API built with TypeScript.
• Pre-built components to most used UI libraries/frameworks:
  • React
  • Vue
• Cluster mode.

Coming soon features:

• Nested timelines.
• SSR support.
• Pre-built components to most used UI libraries/frameworks:
  • Svelte
• Pre-built canvas timeline render.

Philosophy

// TODO: Explain why library

• Only accepts timestamps in milliseconds format.
• Layer implementation to allow fine-grain control over the timeline.

How To Use

1. Install library:

   # With yarn
   yarn add virtual-headless-timeline
   
   # or with npm
   npm i virtual-headless-timeline

// TODO: When library have version 1.0.0, create basic example.

Roadmap

v1.0.0

• Implement timeline manager:
  • Basic range and calc orchestration.
  • Add unit tests.
  • Update item.
  • Add item.
  • Remove item.
• Create timeline item entity
  • Added basic range offets calculation
  • Added unit tests
• Implement DOM layer:
  • ResizeObserver to support responsive.
  • Pan gesture support; will move to future or past using current timeline range.
  • Add unit tests to DOM layer.
• Events
  • On scroll event
  • On scroll end event
• Refactor code to simplify API.
• Create pre-built React component.
• Create pre-built Vue component.
• Create pre-built Svelte component.
• Create demo pages.
• Enhance current README with basic examples.
• Create API.md file with explained library API.

v1.1.0

• Scroll gesture support; will modify current timeline range.
• Create canvas implementation.
• SSR support.

Credits

This library uses the following open source modules:

• Hammer.JS: Allows to control gestures in timeline (pan, scroll, etc).

Support

// TODO: Add buymeacoffe link.

License

MIT

GitHub @enriquebv  ·  Twitter @enriquedev_