https://github.com/umbrellio/rollex
Timeless Luxury Counters
https://github.com/umbrellio/rollex
Last synced: about 1 year ago
JSON representation
Timeless Luxury Counters
- Host: GitHub
- URL: https://github.com/umbrellio/rollex
- Owner: umbrellio
- License: mit
- Created: 2017-03-05T10:46:05.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-12-07T13:23:28.000Z (over 7 years ago)
- Last Synced: 2024-04-29T18:08:50.624Z (about 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 194 KB
- Stars: 9
- Watchers: 6
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Rollex
[](https://travis-ci.org/umbrellio/rollex)
[](https://saucelabs.com/beta/builds/df8e5b2fed574a62881a95bd89331d02)
Versatile counters in React
## Installation
Install with yarn:
```sh
yarn add rollex
# or npm:
npm i -S rollex
```
## Usage
1. Import `Counter` component:
```js
import { Counter } from 'rollex'
```
2. Use it:
```jsx
```
## API
### Setting time intervals
There are multiple ways of setting the time interval to count down (or up) to:
You can tell Rollex how many seconds to count:
```jsx
```
Or, you can specify timestamps to count to (and from):
```jsx
// from now to a given timestamp
// from `from` to `to`
```
### Update interval
By default, Rollex counters update every second. You can, however, set your own update period via
`interval` prop:
```jsx
// update every 2 seconds
```
### Countdown direction
By default, Rollex counters count "down" (from, say, 60 down to 0). You can make a counter go up:
```jsx
// from 0 to 60
```
### Periods and segments
Rollex counters are split into *periods* (days, hours, minutes, seconds). Each period has its own
*segment*, which contains the digits which correspond to a given period.
By default, Rollex counters use four periods: "days", "hours", "minutes", "seconds" and each segment
is exactly 2 digits long.
You can control this behaviour:
```jsx
// show only hours and minutes
// show 3 digits per segment
```
### Freezing the countdown
You can temporarily (or not) freeze the counter by passing it a `frozen` prop:
```jsx
```
When `frozen` is truthy, the counter will not update at all.
### Synchronizing time with client
By default, Rollex counters do not try to synchronize time. That means that if a counter is frozen
at 59 seconds, and then unfrozen after an hour, it will continue counting down from 59 seconds.
If time sync is enabled, the counter will synchronize time and instantly go down to 0.
```jsx
```
### Animating the counter
By default, Rollex counters are not animated (they look like digital clocks). If you want to enable
animations (make the counters look analog), you should pass the `easingFunction` prop (any valid
CSS easing function):
```jsx
```
You can also control animation duration (300 ms by default):
```jsx
```
### Radix
You can even control the radix that Rollex counters use! By default it's 10, but if you want to
go [dozenal](http://dozenal.org), you can:
```jsx
```
### Transform and wrap digits
If you want to use different symbols for your digits, you can (let's say, you want a dozenal
counter with 'X' representing a 10 and 'E' representing an 11):
```jsx
```
You can get even more control over your digits with a digit map:
```jsx
// use images instead of text for digits
}
/>
```
### Labels and separators
All counter segments can be labelled.
```jsx
// map from periods to strings
// use a function (use case: pluralisation)
{
return number % 10 === 1 ? period.slice(0, -1) : period
}}>
```
Segments can be separated by a separator symbol:
```jsx
// dd:hh:mm:ss
```
## License
Released under MIT License.
## Authors
Created by Alexander Komarov.
