React Wavify

    

A simple React component which creates an animated wave.

Live Demo

This component is heavily adapted from Mikołaj Stolarski's awesome Codepen
and is functionally similar to Benjamin Grauwin's Wavify plug-in.

!img

Installation

Yarn

``yarn
yarn add react-wavify
`

npm

`npm
npm install react-wavify
`

Usage

`jsx
import React from 'react'
import Wave from 'react-wavify'

const App = () => (
paused={false}
style={{ display: 'flex' }}
options={{
height: 20,
amplitude: 20,
speed: 0.15,
points: 3
}}
/>
)
`

Simply add the Wave component to the React application using JSX.

The wave's width will scale to fit the parent container.

Props

$3

The fill property can be set to anything that a SVG path can accept (usually gradients or colors). Default: #FFF

$3

The paused property controls the play state of the animation. Default: false

If set to true the wave animation will pause.

$3

The component supports a variety of options to affect how the wave is rendered.

Any omitted options will be set to the default value.

- height - Height of the wave relative to the SVG element. Default: 20
- amplitude - Amplitude of the rendered wave. Default: 20
- speed - Speed that the wave animation plays at. Default: 0.15
- points - Amount of points used to form the wave.
Can not be less than 1. Default: 3

$3

Any other props such as id, className or style will be passed through to the root of the component.

Other props such as opacity or stroke will be passed to the SVG path element.

Any other elements can be passed inside the SVG component itself.

Inner elements can be used to add gradients, clipping paths, or masks.

##### Using a Gradient

`jsx








`

!img

##### Using a Clipping Path

`jsx

{/ Example adapted from https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask /}




`

!img

##### Using a Mask

`jsx











``

!img