tline
v0.1.12
Published
Time line for the CSS evolution and history of tooling, libraries, frameworks and so on
Downloads
38
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