React Animated Waves

Installation • Demo • Usage • Contributing • License

react-animated-waves is an opinionated canvas-based React component for displaying wave animations. The colors and strength of the wave animations can be customized to support dynamic UIs such as audio visualizations, voice UIs, progress loaders, etc.

Installation

react-animated-waves can be installed using npm (or your favorite package manager):

$ npm install react-animated-waves

Demo

Check out an interactive demo here.

Usage

Import the Waves component from react-animated-waves and use it in your React app as follows:

import { Waves } from "react-animated-waves";

<Waves amplitude={20} colors={["#FF6AC6", "#436EDB", "#FF6AC6"]} />;

Props

The Waves component accepts the following props:

Prop	Description	Default
amplitude	Defines the strength of the waveform. Higher values result in taller waves.	20
colors	An array of hex colors used to create a linear gradient effect on the waveform.	['#436EDB']

Contributing

Please read CONTRIBUTING.md for details on how to report issues, propose changes, and submit pull requests.

License

MIT © Rohit Agrawal