tline
Time line for the CSS evolution and history of tooling, libraries, frameworks and so on
Features
- Zero dependencies
- dark mode support
🌓 - reverse timeline is supported
- sort timeline by default
- support filter using tags and year
- JavaScript code linting is done using
eslint - Has
.editorconfigwhich helps developers define and maintain consistent coding styles between different editors and IDEs.
Installation
npm i tline
# Or
yarn add tline
Before starting
the event (data) should be similar to:
all properties are required expect url is optional
...
{
name: 'Bootstrap',
url: 'https://getbootstrap.com',
description: 'The most popular HTML, CSS, and JS library in the world.',
createdAt: new Date(2011, 7, 19),
tags: ['frameworks'],
},
...
Usage 🚀
import Tline from 'Tline';
const events = [] // your events as previously structured
<Tline timeline={events} />
Available props
| property | type | default | description |
|---|---|---|---|
tag |
string |
all |
filter timeline by events tag |
year |
number |
0 |
filter timeline by events year |
reversed |
boolean |
false |
determine if timeline is reversed or not default is sorted by date |
darkmode |
boolean |
false |
activate darkmode |
Playground
const [setting, setSetting] = useState({
tag: 'all',
year: 0,
reversed: false,
darkmode: false,
timeline: data,
});
return (
<div className={`app ${setting.darkmode ? 'darkmode' : ''}`}>
<Tline {...setting} />
</div>
);
Related Work 🌠
tube-cli– A package for downloading youtube videos & playliststube-info– A package for getting youtube videos & playlists infojs-pmq– A simple NPM package to get popular movie quotes.
Data sources
Contribution 🤝
- Fork it!
- Create your feature branch:
git checkout -b feature-name - Commit your changes:
git commit -am 'Some commit message' - Push to the branch:
git push origin feature-name - Submit a pull request
😉 😉
License 📜
MIT © Mohammed Taysser