React Animated Waves

React Animated Waves is a React component that generates beautiful animated waves for audio visualizations or UI loading states.

https://github.com/agrawal-rohit/react-animated-waves/assets/29514438/2948ec93-6f38-49f4-bee4-85ad44ddbc49

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

To use React Animated Waves in your project, 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.