{"id":19134050,"url":"https://github.com/umbrellio/rollex","last_synced_at":"2025-05-06T19:27:23.733Z","repository":{"id":65491241,"uuid":"83962842","full_name":"umbrellio/rollex","owner":"umbrellio","description":"Timeless Luxury Counters","archived":false,"fork":false,"pushed_at":"2018-12-07T13:23:28.000Z","size":199,"stargazers_count":9,"open_issues_count":1,"forks_count":2,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-29T18:08:50.624Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/umbrellio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-05T10:46:05.000Z","updated_at":"2018-12-07T13:23:30.000Z","dependencies_parsed_at":"2023-01-25T18:45:27.017Z","dependency_job_id":null,"html_url":"https://github.com/umbrellio/rollex","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umbrellio%2Frollex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umbrellio%2Frollex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umbrellio%2Frollex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umbrellio%2Frollex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umbrellio","download_url":"https://codeload.github.com/umbrellio/rollex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223793225,"owners_count":17203772,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T06:25:05.041Z","updated_at":"2024-11-09T06:25:05.627Z","avatar_url":"https://github.com/umbrellio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rollex\n[![Build Status](https://travis-ci.org/umbrellio/rollex.svg?branch=master)](https://travis-ci.org/umbrellio/rollex)\n\n[![Build Status](https://saucelabs.com/browser-matrix/akxcv.svg)](https://saucelabs.com/beta/builds/df8e5b2fed574a62881a95bd89331d02)\n\nVersatile counters in React\n\n## Installation\n\nInstall with yarn:\n\n```sh\nyarn add rollex\n# or npm:\nnpm i -S rollex\n```\n\n## Usage\n\n1. Import `Counter` component:\n\n```js\nimport { Counter } from 'rollex'\n```\n\n2. Use it:\n\n```jsx\n\u003cCounter seconds={98} /\u003e\n```\n\n## API\n\n### Setting time intervals\n\nThere are multiple ways of setting the time interval to count down (or up) to:\n\nYou can tell Rollex how many seconds to count:\n```jsx\n\u003cCounter seconds={60} /\u003e\n```\n\nOr, you can specify timestamps to count to (and from):\n\n```jsx\n// from now to a given timestamp\n\u003cCounter to={1506951918155} /\u003e\n// from `from` to `to`\n\u003cCounter from={1506951900123} to={1506951918155} /\u003e\n```\n\n### Update interval\nBy default, Rollex counters update every second. You can, however, set your own update period via\n`interval` prop:\n\n```jsx\n// update every 2 seconds\n\u003cCounter seconds={60} interval={2000} /\u003e\n```\n\n### Countdown direction\nBy default, Rollex counters count \"down\" (from, say, 60 down to 0). You can make a counter go up:\n\n```jsx\n// from 0 to 60\n\u003cCounter seconds={60} direction=\"up\" /\u003e\n```\n\n### Periods and segments\nRollex counters are split into *periods* (days, hours, minutes, seconds). Each period has its own\n*segment*, which contains the digits which correspond to a given period.\n\nBy default, Rollex counters use four periods: \"days\", \"hours\", \"minutes\", \"seconds\" and each segment\nis exactly 2 digits long.\n\nYou can control this behaviour:\n\n```jsx\n// show only hours and minutes\n\u003cCounter seconds={3600} minPeriod=\"minutes\" maxPeriod=\"hours\" /\u003e\n// show 3 digits per segment\n\u003cCounter seconds={72 * 3600} digits={3} /\u003e\n```\n\n### Freezing the countdown\n\nYou can temporarily (or not) freeze the counter by passing it a `frozen` prop:\n\n```jsx\n\u003cCounter seconds={60} frozen /\u003e\n```\n\nWhen `frozen` is truthy, the counter will not update at all.\n\n### Synchronizing time with client\n\nBy default, Rollex counters do not try to synchronize time. That means that if a counter is frozen\nat 59 seconds, and then unfrozen after an hour, it will continue counting down from 59 seconds.\nIf time sync is enabled, the counter will synchronize time and instantly go down to 0.\n\n```jsx\n\u003cCounter seconds={59} syncTime /\u003e\n```\n\n### Animating the counter\nBy default, Rollex counters are not animated (they look like digital clocks). If you want to enable\nanimations (make the counters look analog), you should pass the `easingFunction` prop (any valid\nCSS easing function):\n\n```jsx\n\u003cCounter seconds={59} easingFunction='ease-in-out' /\u003e\n```\n\nYou can also control animation duration (300 ms by default):\n\n```jsx\n\u003cCounter seconds={59} easingFunction='ease-in-out' easingDuration={500} /\u003e\n```\n\n### Radix\n\nYou can even control the radix that Rollex counters use! By default it's 10, but if you want to\ngo [dozenal](http://dozenal.org), you can:\n\n```jsx\n\u003cCounter seconds={3600} radix={12} /\u003e\n```\n\n### Transform and wrap digits\n\nIf you want to use different symbols for your digits, you can (let's say, you want a dozenal\ncounter with 'X' representing a 10 and 'E' representing an 11):\n\n```jsx\n\u003cCounter seconds={3600} radix={12} digitMap={{\n  'A': 'X',\n  'B': 'E',\n}} /\u003e\n```\n\nYou can get even more control over your digits with a digit map:\n\n```jsx\n// use images instead of text for digits\n\u003cCounter\n  seconds={3600}\n  digitWrapper={digit =\u003e \u003cimg src={`/digits/${digit}.jpg`} /\u003e}\n/\u003e\n```\n\n### Labels and separators\n\nAll counter segments can be labelled.\n\n```jsx\n// map from periods to strings\n\u003cCounter seconds={141234} labels={{\n  days: 'days',\n  hours: 'hours'\n}} /\u003e\n// use a function (use case: pluralisation)\n\u003cCounter seconds={123123} labels={(period, number) =\u003e {\n  return number % 10 === 1 ? period.slice(0, -1) : period\n}}\u003e\n```\n\nSegments can be separated by a separator symbol:\n\n```jsx\n// dd:hh:mm:ss\n\u003cCounter seconds={2312413} separator=':' /\u003e\n```\n\n## License\nReleased under MIT License.\n\n## Authors\nCreated by Alexander Komarov.\n\n\u003ca href=\"https://github.com/umbrellio/\"\u003e\n\u003cimg style=\"float: left;\" src=\"https://umbrellio.github.io/Umbrellio/supported_by_umbrellio.svg\" alt=\"Supported by Umbrellio\" width=\"439\" height=\"72\"\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumbrellio%2Frollex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumbrellio%2Frollex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumbrellio%2Frollex/lists"}