Simple React component for displaying a timecode with various format options.
npm install react-timecode!npm
!NPM
!npm
!Coveralls github
!CircleCI
!Known Vulnerabilities
!Twitter Follow
Simple React component for displaying a timecode, with various formatting options.
Via npm
``sh`
npm install --save react-timecode
Via Yarn
`sh`
yarn add react-timecode
The Timecode component is setup to be configurable as it needs to be, and hopefullyprops
nothing more. Below are the you can set on the component, along with a
simple example.
* 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)
`js
import Timecode from 'react-timecode';
...
render() {
const {
time,
} = this.state;
return (
);
}
...
`
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 }
*
*
*