https://github.com/enriquebv/eon-timeline

A flexible timeline renderer.
https://github.com/enriquebv/eon-timeline

events react reactjs timeline typescript

Last synced: 19 days ago
JSON representation

A flexible timeline renderer.

• Host: GitHub
• URL: https://github.com/enriquebv/eon-timeline
• Owner: enriquebv
• License: mit
• Created: 2022-10-28T21:26:40.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-22T17:54:36.000Z (almost 2 years ago)
• Last Synced: 2024-12-13T22:12:56.998Z (22 days ago)
• Topics: events, react, reactjs, timeline, typescript
• Language: TypeScript
• Homepage: https://enriquebv.github.io/eon-timeline/
• Size: 514 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  As can be inferred from the semantic versioning, v1.0 has not yet arrived, so do not treat the library yet as if it could be used in production.





  


  eon-timeline

  




A flexible timeline solution.




  





  Docs •

  Example •

  Key Features •

  How To Use •

  Roadmap •

  License



## Key Features

- **Simplicity**: This library will just render timeline lanes, and ocurrences. You can extend the library to create your own timeline experience.

- **Flexibility**: The main target of this library, allow you to create your own timeline experience.

- **Headless**: Core package contains logic to compute ocurrence status, and a DOM adapter to transform that status to valid CSS position.

- **Pre-built components**: Even the core being headless, you can use pre-built [components](./components/) to save time.

  - Currently only React (`@eon-timeline/react`) is supported, Vue and Svelte are in the roadmap.

- **Update timelines in real-time**: Add, remove and update ocurrences from timelines.

- **Virtualized time navigation**: Pans timeline left and right to view past or future (respectively). DOM adapter will just take care of visible ocurrences, so you can store thousands of ocurrences.

[Coming soon features.](#v110)

## How To Use

Check [Quick start](https://enriquebv.github.io/eon-timeline/docs/#/quickstart?id=quick-start) guide.

## Roadmap

### v1.0.0

- Timeline manager:

  - Basic range and ocurrence status computation.

  - Add, update and remove ocurrences.

- Timeline DOM adapter:

  - Sync range between multiple timelines.

  - Transform timeline ocurrences status to DOM position.

  - Virtualize ocurrences.

  - Support responsible.

  - Support gestures; navigate through times using pan gesture.

  - Dynamic add/remove timelines.

### v1.1.0

- Svelte pre-built component.

- Vue pre-built component.

- Enhance ocurrences support:

  - On ocurrence add/update/remove.

  - On timeline add/remove.

  - On range change/changed.

## Support

If you think eon-timeline is helpful, or my work is valuable, [consider buying me a cup of coffee](https://www.buymeacoffee.com/enriquebv). :heart:

## License

[MIT](./LICENSE)

---

> GitHub [@enriquebv](https://github.com/enriquebv)  · 

> Twitter [@enriquedev\_](https://twitter.com/enriquedev_)