React Animated Waves

Installation • Demo • Usage • Props • Contributing • License

A canvas-based component built with React for creating fluid animated waves (ideally used in audio visualizations, voice UIs, progress loaders, etc.).

Installation

The easiest way to get the latest version of react-animated-waves is to install it via npm, yarn or pnpm:

npm install react-animated-waves

Usage

Import the Waves component from the library and use it in your React app. Check out an interactive demo here.

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 height of the waveform. Higher values result in taller waves.	20
colors	An array of colors used to create a linear gradient effect on the waveform.	['#436EDB']

Contributing

Contributions are welcome. Please read the contributing guide for more information.

License

MIT License.