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
Example
{ // 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 =
⚠️ 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-waveyarn add --peer react react-pose popmotion
or
npm i use-posed-wavenpm 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