react-timecode
TypeScript icon, indicating that this package has built-in type declarations

1.3.0 • Public • Published

react-timecode

npm NPM npm Coveralls github CircleCI Known Vulnerabilities Twitter Follow

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

  • as:String|Function - Element to render the timecode within. (Default: span)
  • [DEPRECATED] 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)
    • mm:ss - (Example: 90:00)
    • H:?mm:ss - (Example: 00: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} />
    );
  }

...

Utilities

In addition to the Timecode component, the underlying utility methods that the component uses for rendering the timecodes have also been exposed, in case you have some need to render some strings without the context of the component.

  • parseTime(time:Number): { hours: Number, minutes: Number, seconds: Number, milliseconds: Number }
  • pad(number: Number, length: Number = 2): String
  • formatMilliseconds(milliseconds: Number, length: Number = 3): String
  • formatTimecode({ format: String, time: Number }): String

Pairs well with...

License

MIT © Ryan Hefner

Package Sidebar

Install

npm i react-timecode

Weekly Downloads

603

Version

1.3.0

License

MIT

Unpacked Size

56 kB

Total Files

20

Last publish

Collaborators

  • ryanhefner