tline
v0.1.12
Published
Time line for the CSS evolution and history of tooling, libraries, frameworks and so on
Downloads
3
Maintainers
Readme
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 📆
- Build using
typescript
- 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} />
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