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

use-posed-wave

v2.0.0

Published

React hook to animate a wave-like effect with SVG.

Downloads

3

Readme

usePosedWave

A React hook that returns a "react-pose" svg path component animated like a wave.

What ?

Given a size and amplitude parameters, the hook returns an enhanced component and a "pose" string to pass it. By default, every 3s the wave goes down, morph a little, then up - indefinitely.

Example

function App() {
  // Configure the wave animation and get the component to render.
  // Hint: You could pass the screen width as `x` and any height as `y`
  // to make a full screen width animation.
  const [Wave, wavePose]  = usePosedWave({ size: { x: 200, y: 50 , amplitude: 25 });
  const [Foam, foamPose]  = usePosedWave({ size: { x: 200, y: 50 , amplitude: 35, originOffset: 15 });

  // The component being a SVG path tag, it must be wrapped inside a <svg/>
  // component.
  return (
    <svg width={size.x} height={size.y * 2} style={{ background: "sandybrown" }} >
      {Foam && <Foam pose={foamPose} fill="white" />
      {Wave && <Wave pose={wavePose} fill="teal" />}
    </svg>
  )
}

⚠️ Note: The component will re-render if the "size" parameter changes. Either define it outside the component or with React.useState.

Install

Has react, react-pose and popmotion as --peer dependencies.

yarn add use-posed-wave
yarn add --peer react react-pose popmotion

or

npm i use-posed-wave
npm i --peer react react-pose popmotion

API

const { usePosedWave } = require('use-posed-wave')

  • A react hook that retuns the SVG path component.
  • Takes the following arguments:
    • Required:

      • size: { x: number, y: number } The bounding rect of the animation.
      • amplitude: number The animation's y distance it grows (in pixel).
    • Optional:

      • optionalDuration: number || 3000 The duration for the wave to transit from one state to the other.
      • optionalOffset: number || 0 The y offset to add to the generated path.
      • optionalFade: boolean || false Should the wave fade in and out during the transition?

Todo

  • [ ] Make the initial delay optional
  • [ ] Return the path component only (without the pose string)
  • [ ] Make the wave orientation dynamic (vertical, horizontal)

Acknowledgement

Without those libraries, this hook would not exists.

Created by

License

MIT