React-frame-picker NPM

react-frame-picker

Frame-by-frame video previews, with the ability to use or download individual frames.

Props

Prop	Type	Required	Default
src	string	Yes	-	The URL of the video to be previewed. Anything that works as src with a standard HTML5 video element should be fine here.
action	function	Yes	-	Callback that takes a single argument - the file object of the extracted frame. ie: `(file) => console.log('Do something with the file')`.
step	number	No	0.04	The value (in seconds) of the increment when stepping forward or backward through the video.
disabled	boolean	No	false	Disables the 'open frame picker' button.
useFrameButtonText	String	No	"Use Frame"	The text that is displayed in the button that invokes the action prop.
buttonRenderFunction	function	No	-	A render function to pass a custom button to open the frame-picker. Render function is passed onClick and disabled, ie: `({ onClick, disabled }) => <YourCustomButton onClick={onClick} disabled={disabled}>`. If not provided, a default button will be rendered.
buttonStyle	object	No	_	Can be passsed to style the default 'open frame-picker' button, as an alternative to passing an custom button render function.

Basic Usage:

import FramePicker from 'react-frame-picker';

export class SomeComponent extends React.Component {
  useFile = (file) => {
    console.log(file);
  }

  render() {
    return (
      <FramePicker
        step={0.03}
        src="https://some.video/file.mp4"
        useFrameButtonText="Use this frame"
        action={this.useFile}
      />
    );
  }
}

Passing a custom trigger button:

import FramePicker from 'react-frame-picker';

export class SomeComponent extends React.Component {
  useFile = (file) => {
    console.log(file);
  }

  renderCustomButton = ({ onClick, disabled }) => {
    return (
      <button onClick={onClick} disabled={disabled}>A Custom Button</button>
    );
  }

  render() {
    return (
      <FramePicker
        step={0.03}
        src="https://some.video/file.mp4"
        buttonRenderFunction={this.renderCustomButton}
        action={this.useFile}
      />
    );
  }
}

file-saver prop-types react react-dom react-portal

@infinitebrahmanuniverse/nolb-react-fr @everything-registry/sub-chunk-2556 @zalastax/nolb-react-fr

1.0.6

5 years ago