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
.editorconfig
which 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} />
props
Available 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