npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-playback

v2.0.5

Published

Playback an array of states like a video, control the animation duration while normalizing the result across hardware to make the duration match when render times differs from one device to another

Downloads

2

Readme

react-playback

Playback an array of states like a video, control the animation duration while normalizing the result across hardware to make the duration match when render times differs from one device to another

Getting Started

npm install react-playback

Step 1 - initialize the hook

// the hook takes as parameters the array of states and the duration in ms and the autoplay setting in boolean which defaults to false
const [frame, isPlaying, PB, isLoop] = usePlayback(stateArray, 5000, true);

Step 2- use the frame state inside your component

import Grid from "./Grid"
const Wrapper = ({stateArray}) => {
	const [frame, isPlaying, PB, isLoop] = usePlayback(stateArray, 5000, true);

	return (
	<div>
		// other components
		<Grid state={frame} />
	<div/>)
}

Step 3- control the animation

import Grid from "./Grid"
const Wrapper = ({stateArray}) => {
	const [frame, isPlaying, PB, isLoop] = usePlayback(stateArray, 5000, true);
	return (
	<div>
		<button
			onClick={() => isPlaying ? PB.pause() : PB.play()}
		>
			{isPlaying?"Pause":"Play"}
		</button>
		<Grid state={frame} />
	<div/>)
}

The api

The library is a react custom hook usePlayback which takes 3 parameters :

  1. the array of states you wish to playback
  2. the duration of each playback in milliseconds
  3. a boolean value for whether you want it to autoplay immediately or not

It returns an array containing the following in this order :

  1. the state of the current frame
  2. a boolean representing whether the hook is currently playing the frames
  3. an object containing the following methods that allow you to control your playback and settings:
  • clear() : stops the current playback and removes all frames
  • load(frames, duration, autoplay = false) : stops the current playback, it takes the same parameters as the usePlayback hook and loads the frames and settings it is given
  • getPrevFrame() : if playback is inactive, goes to previous frame
  • getNextFrame() : if playback is inactive, goes to next frame
  • play() : start playback
  • pause() : pauses playback at current frame
  • reset() : stops playback and returns to the first frame
  • updateDuration() : if playback is inactive, update the duration parameter of the playback
  • setLoop(bool) : set looping setting
  1. a boolean representing whethe the isLoop setting of the playback