https://github.com/rmariuzzo/react-chronos
⛓ React chronology component providing dual chronological timelines.
https://github.com/rmariuzzo/react-chronos
chronology dual-chronological-timelines react reactjs
Last synced: 4 months ago
JSON representation
⛓ React chronology component providing dual chronological timelines.
- Host: GitHub
- URL: https://github.com/rmariuzzo/react-chronos
- Owner: rmariuzzo
- License: mit
- Created: 2016-10-18T21:24:06.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-03-11T06:55:11.000Z (over 7 years ago)
- Last Synced: 2025-02-28T14:11:16.363Z (over 1 year ago)
- Topics: chronology, dual-chronological-timelines, react, reactjs
- Language: JavaScript
- Homepage:
- Size: 217 KB
- Stars: 40
- Watchers: 3
- Forks: 14
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Chronos
⛓ React chronology component providing dual chronological timelines.
### Installation
```shell
npm install react-chronos --save
```
### Usage
```jsx
import Chronology from 'react-chronos';
{events.map(event => (
{ event.details }
))}
```
## Documentation
### `Chronology`
The `Chronology` component is the main and only component provided by `react-chronos`. It accepts the following properties:
#### `type`
The type of chronology and timeline to render. It can one of the following values: `horizontal` or `vertical`. If not specified, the default will be `vertical`.
#### `eventSelector`
The query selector to use to find **events** inside the chronology.
#### `markerSelector`
The query selector to use to find **markers** inside the chronology.
#### `markerClassNames`
The object that defines the class names to be applied to **markers**. The shape of the object and its default values is as follow:
```js
{
left: 'marker-left',
right: 'marker-right',
top: 'marker-top',
bottom: 'marker-bottom',
}
```
For a vertical chronology the values for `left` and `right` will be applied to **markers** where its related **event** was positioned to any of those sides. The same behavior goes for horizontal chronology using `top` and `bottom`.
#### `markerStyles`
The object that defines the inline styles to be applied to **markers**. The shape of the object and its default values is as follow:
```js
{
left: {},
right: {},
top: {},
bottom: {},
}
```
For a vertical chronology the values for `left` and `right` will be applied to **markers** where its related **event** was positioned to any of those sides. The same behavior goes for horizontal chronology using `top` and `bottom`.
## Development
TBD
```shell
# For quick development and hot reload...
npm run storybook
# For building the distribution package...
npm start
```
## Tests
TBD
```shell
npm test
```