Narnia's Psychedelic Mushrooms

    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

    403

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    104 kB

    Total Files

    10

    Last publish

    Collaborators

    • ryanhefner