A lightweight and customizable React component that creates stunning animated wave effects. Perfect for enhancing audio visualizations, adding dynamic loading states, or creating eye-catching UI elements in your React apps.

Table of Contents

1. Installation
2. Usage
3. Props
4. Contributing
5. License

Installation

React Animated Waves can be installed using either npm or yarn:

Using npm:

npm install --save react-animated-waves

Using yarn:

yarn add 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

All contributions from the community are welcome. Please read the contributing guide for more information.

License

MIT License.