Skip to content

nicobarray/use-posed-wave

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

usePosedWave

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


Waves


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, morphs a little, then up - indefinitely. Combine multiple waves with different colors to get the gif's result!

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

or

npm i use-posed-wave

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)
  • Make it update on "amplitude" change

Related

  • useTimedIndex - Get an index value auto-incremented by 1 every X ms.

Acknowledgement

Without those libraries, this hook would not exists.

Created by

License

MIT

About

React hook that returns a react-pose animated SVG path.

Resources

Stars

Watchers

Forks

Packages

No packages published