Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/derhuerst/public-transport-ui
[work in progress] – UI components for rendering public transport data.
https://github.com/derhuerst/public-transport-ui
components jsx public-transport transit ui virtual-dom
Last synced: 20 days ago
JSON representation
[work in progress] – UI components for rendering public transport data.
- Host: GitHub
- URL: https://github.com/derhuerst/public-transport-ui
- Owner: derhuerst
- License: isc
- Created: 2018-11-30T23:10:21.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-30T23:11:43.000Z (about 6 years ago)
- Last Synced: 2024-12-31T11:36:57.248Z (27 days ago)
- Topics: components, jsx, public-transport, transit, ui, virtual-dom
- Language: JavaScript
- Homepage: https://github.com/derhuerst/public-transport-ui#public-transport-ui
- Size: 16.6 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license.md
Awesome Lists containing this project
README
# public-transport-ui
**Web UI components for rendering public transport data**, e.g. departures.
They are heavily biased towards Germany and have a quite specific UI right now. Help me make this lib more general and useful by [opening an issue](https://github.com/derhuerst/public-transport-ui/issues)!
[](https://www.npmjs.com/package/public-transport-ui)
[](https://travis-ci.org/derhuerst/public-transport-ui)
[](https://gitter.im/derhuerst)
[](https://patreon.com/derhuerst)
## Installation
```shell
npm install public-transport-ui
```
## Getting Started
You can use `public-transport-ui` with a number of [`React.createElement`](https://reactjs.org/docs/react-without-jsx.html)-/[JSX](http://facebook.github.io/jsx/)-compatible `h(tagName, props, children)` library. This makes it a lot more flexible, but also more complex. You will have to pass an `h()` function into `public-transport-ui`.
[React](https://reactjs.org/):
```js
const h = require('react').createElement
```
[`virtual-dom`](https://www.npmjs.com/package/virtual-dom):
```js
const h = require('virtual-dom')
```
[`h2ml`](https://www.npmjs.com/package/h2ml):
```js
const h2mlAdapter = require('public-transport-ui')
const h2ml = require('h2ml')
const h = h2mlAdapter(h2ml)
```
Using the appropriate `h()` function, let's now render a departure of a vehicle:
```js
const createRender = require('public-transport-ui')
const render = createRender({
h, // see above
timezone: 'Europe/Berlin',
locale: 'de-DE'
})
const departure = render.departure({
when: '2018-11-22T18:05:20+0100',
delay: 5 * 60 + 20,
line: {type: 'line', name: 'foo'},
direction: 'bar'
})
```
### With JSX
[JSX](http://facebook.github.io/jsx/) is a syntax extension to write in [a more readable and compact way](https://reactjs.org/docs/jsx-in-depth.html), well-known because it is the preferred way to write [React](https://reactjs.org/) components. Technically, it is independent of React, so you can use it with [preact](https://preactjs.com), [hyperscript](https://github.com/hyperhype/hyperscript) or [mercury](http://raynos.github.io/mercury/) as well.
As an example, we're going to use React & JSX:
```jsx
/** @jsx h */
const h = require('react').createElement
const createRender = require('public-transport-ui')
const render = createRender({
h,
timezone: 'Europe/Berlin',
locale: 'de-DE'
})
const MyComponent = (props) => {
return (
{render.departure(someDeparture)}
);
}
```
## Usage
### CSS
**Make sure to serve the CSS of each component that you use**, e.g. by bundling them together. Let's say you use the components `public-transport-ui/time` and `public-transport-ui/arrival-or-departure` in your app:
```js
# create-css-bundle.js
const {readCSSSync} = require('public-transport-ui/build/read-css')
process.stdout.write([
readCSSSync('time'),
readCSSSync('arrival-or-departure')
].join('\n\n'))
```
```shell
node create-css-bundle.js >public-transport-ui.css
```
## Components
### `/time` – arrival/departure time
Accepts the [arrival/departure time markup of `hafas-client`](https://github.com/public-transport/hafas-client/blob/1ebb958b4a65128f2bf640e182d3c1333a6508fc/docs/departures.md#response).
```js
const createRenderDepartureTime = require('public-transport-ui/time')
const renderDepartureTime = createRenderDepartureTime({}, {h, timezone, locale})
const tree = renderDepartureTime({
when: '2018-11-22T18:05:20+0100',
delay: 5 * 60 + 20
})
```
```html
+5m
```
- `.pt-time` – class of the wrapping ``
- `.pt-time--realtime` – if it has realtime data
- `.pt-time--onTime` – if it is exactly on time
- `.pt-time--delayed` – if it not on time
- `.pt-time--early` – if it is too early
- `.pt-time--cancelled` – if it has been cancelled
- `.pt-time-delay` – class of the delay ``
### `/arrival` & `/departure`
Accept the [arrival/departure markup of `hafas-client`](https://github.com/public-transport/hafas-client/blob/1ebb958b4a65128f2bf640e182d3c1333a6508fc/docs/departures.md#response).
```js
const createRenderDeparture = require('public-transport-ui/departure')
const renderDeparture = createRenderDeparture({h, timezone, locale})
const tree = renderDeparture({
when: '2018-11-22T18:05:20+0100',
delay: 5 * 60 + 20,
line: {type: 'line', name: 'foo'},
direction: 'bar'
})
```
```html
```
- `.pt-arrival`/`.pt-departure` – class of the wrapping ``
- `.pt-arrival-when`/`.pt-departure-when` – class of the when ``
- `.pt-arrival-line`/`.pt-departure-line` – class of the line ``
- `.pt-arrival-direction`/`.pt-departure-direction` – class of the direction ``
## Contributing
If you have a question or need support using `public-transport-ui`, please double-check your code and setup first. If you think you have found a bug or want to propose a feature, refer to [the issues page](https://github.com/derhuerst/public-transport-ui/issues).