{"id":15396993,"url":"https://github.com/ryanhefner/react-timecode","last_synced_at":"2025-04-15T22:31:00.954Z","repository":{"id":45272961,"uuid":"98347349","full_name":"ryanhefner/react-timecode","owner":"ryanhefner","description":"⏳ Simple React component for displaying a timecode, with various formatting options.","archived":false,"fork":false,"pushed_at":"2023-07-10T21:56:27.000Z","size":1976,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T03:42:28.170Z","etag":null,"topics":["react","react-component","react-timecode","react-timer-wrapper","timecode"],"latest_commit_sha":null,"homepage":"https://www.pkgstats.com/pkg:react-timecode","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/ryanhefner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":"ryanhefner","open_collective":"ryanhefner","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-07-25T20:30:54.000Z","updated_at":"2024-01-14T15:39:37.000Z","dependencies_parsed_at":"2024-06-18T21:33:06.918Z","dependency_job_id":"7a928477-534d-4b26-9cf2-7e03e638fe42","html_url":"https://github.com/ryanhefner/react-timecode","commit_stats":{"total_commits":184,"total_committers":4,"mean_commits":46.0,"dds":"0.32608695652173914","last_synced_commit":"d6f0ac01c9c55f483aaf4b93b4c52f82e5618143"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-timecode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-timecode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-timecode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-timecode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanhefner","download_url":"https://codeload.github.com/ryanhefner/react-timecode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248589891,"owners_count":21129698,"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":["react","react-component","react-timecode","react-timer-wrapper","timecode"],"created_at":"2024-10-01T15:35:40.274Z","updated_at":"2025-04-15T22:31:00.056Z","avatar_url":"https://github.com/ryanhefner.png","language":"JavaScript","readme":"# ⏳ react-timecode\n\n![npm](https://img.shields.io/npm/v/react-timecode?style=flat-square)\n![NPM](https://img.shields.io/npm/l/react-timecode?style=flat-square)\n![npm](https://img.shields.io/npm/dt/react-timecode?style=flat-square)\n![Coveralls github](https://img.shields.io/coveralls/github/ryanhefner/react-timecode?style=flat-square)\n![CircleCI](https://img.shields.io/circleci/build/github/ryanhefner/react-timecode?style=flat-square)\n![Known Vulnerabilities](https://snyk.io/test/github/ryanhefner/react-timecode/badge.svg)\n![Twitter Follow](https://img.shields.io/twitter/follow/ryanhefner)\n\n\nSimple React component for displaying a timecode, with various formatting options.\n\n## Install\n\nVia [npm](https://npmjs.com/package/react-timecode)\n\n```sh\nnpm install --save react-timecode\n```\n\nVia [Yarn](https://yarn.fyi/react-timecode)\n\n```sh\nyarn add react-timecode\n```\n\n## How to use\n\nThe `Timecode` component is setup to be configurable as it needs to be, and hopefully\nnothing more. Below are the `props` you can set on the component, along with a\nsimple example.\n\n### Properties\n\n* `as:String|Function` - Element to render the timecode within. (Default: `span`)\n* `[DEPRECATED]` `component:String|Function` - Element to render the timecode within. (Default: `span`)\n* `format:String` - Specifies the format to display the timecode. (Default: `H:?m:ss`)\n  * `HH:mm:ss.SSS` - (Example: 00:01:23.876)\n  * `H:mm:ss.SSS` - (Example: 0:01:23.876)\n  * `H:?mm:ss.SSS` - (Example: 01:23.876)\n  * `H:?m:ss.SSS` - (Example: 1:23.876)\n  * `HH:mm:ss` - (Example: 00:01:23)\n  * `H:mm:ss` - (Example: 0:01:23)\n  * `H:?mm:ss` - (Example: 01:23)\n  * `H:mm` - (Example: 0:01)\n  * `s.SSS` - (Example: 0.000)\n  * `s.SS` - (Example: 0.00)\n  * `mm:ss` - (Example: 90:00)\n  * `H:?mm:ss` - (Example: 00:00)\n  * `H:?m:ss` - (Example: 1:23 - _Default_)\n* `postfix:String` - Append a string after the formatted timecode.\n* `prefix:String` - Include a string before the formatted timecode.\n* `time:Number` - Time in milliseconds to display the timecode for. (Default: `0`)\n\n### Example\n\n```js\nimport Timecode from 'react-timecode';\n\n...\n\n  render() {\n    const {\n      time,\n    } = this.state;\n\n    return (\n      \u003cTimecode time={time} /\u003e\n    );\n  }\n\n...\n\n```\n\n### Utilities\n\nIn addition to the `Timecode` component, the underlying utility methods that the\ncomponent uses for rendering the timecodes have also been exposed, in case you\nhave some need to render some strings without the context of the component.\n\n* `parseTime(time:Number): { hours: Number, minutes: Number, seconds: Number, milliseconds: Number }`\n* `pad(number: Number, length: Number = 2): String`\n* `formatMilliseconds(milliseconds: Number, length: Number = 3): String`\n* `formatTimecode({ format: String, time: Number }): String`\n\n## Pairs well with...\n\n* [react-timer-wrapper](https://github.com/ryanhefner/react-timer-wrapper)\n\n## License\n\n[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)\n","funding_links":["https://patreon.com/ryanhefner","https://opencollective.com/ryanhefner"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Freact-timecode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanhefner%2Freact-timecode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Freact-timecode/lists"}