Miss any of our Open RFC calls?Watch the recordings here! »

react-timecode

1.2.0 • Public • Published

⏳ react-timecode

npm NPM npm Coveralls github CircleCI Snyk Vulnerabilities for GitHub Repo

Simple React component for displaying a timecode, with various formatting options.

Install

Via npm

npm install --save react-timecode

Via Yarn

yarn add react-timecode

How to use

The Timecode component is setup to be configurable as it needs to be, and hopefully nothing more. Below are the props you can set on the component, along with a simple example.

Properties

  • component:String|Function - Element to render the timecode within. (Default: span)
  • format:String - Specifies the format to display the timecode. (Default: H:?m:ss)
    • HH:mm:ss.SSS - (Example: 00:01:23.876)
    • H:mm:ss.SSS - (Example: 0:01:23.876)
    • H:?mm:ss.SSS - (Example: 01:23.876)
    • H:?m:ss.SSS - (Example: 1:23.876)
    • HH:mm:ss - (Example: 00:01:23)
    • H:mm:ss - (Example: 0:01:23)
    • H:?mm:ss - (Example: 01:23)
    • H:mm - (Example: 0:01)
    • s.SSS - (Example: 0.000)
    • s.SS - (Example: 0.00)
    • H:?m:ss - (Example: 1:23 - Default)
  • postfix:String - Append a string after the formatted timecode.
  • prefix:String - Include a string before the formatted timecode.
  • time:Number - Time in milliseconds to display the timecode for. (Default: 0)

Example

import Timecode from 'react-timecode';
 
...
 
  render() {
    const {
      time,
    } = this.state;
 
    return (
      <Timecode time={time} />
    );
  }
 
...
 

Pairs well with...

License

MIT © Ryan Hefner

Install

npm i react-timecode

DownloadsWeekly Downloads

204

Version

1.2.0

License

MIT

Unpacked Size

104 kB

Total Files

10

Last publish

Collaborators

  • avatar