⏳ react-timecode
Simple React component for displaying a timecode, with various formatting options.
Install
Via npmnpm install --save react-timecodeVia Yarn
yarn add react-timecodeHow to use
TheTimecode 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} />
);
}
...