react-timeline-bar

timeline control to use for videos

Install

npm install --save react-timeline-bar

Usage

import React from 'react'

import Timeline from 'react-timeline-bar'
import 'react-timeline-bar/dist/index.css'

const Example = () => {
  render() {
    return <Timeline onSetNewTime={seconds => console.log(seconds)} />
  }
}

Props

• totalDuration total length of e.g. a video, in seconds
• currentTime seconds where the video's play time would currently be
• onSetNewTime callback returning the seconds value in the totalDuration space that a user clicked
• height div height of component, default 50px
• width div width of component, default 300px
• padding left/right padding, default 10px
• color default black
• text optional text to be displayed after total duration

Behaviour

• the display is similar to the timeline in HTML5 controls
• mouse movement is translated into time value within the totalDuration time space
• clicking will return the time value where the mouse is back to the parent component through the onSetNewTime callback
• when using 'width="100%"', set "padding={0}" to avoid miscalculations of mouse position clicks

Others

• bootstrapped with create-react-library

License

MIT © npm okl