/react-animated-waves

Canvas-based animated waves for ReactJS

Primary LanguageTypeScriptMIT LicenseMIT

React Animated Waves

(Interested in creating your own NPM library? Check out my NPM library template to kickstart your library development with best practices and integrated tools.)

GitHub Workflow Status Codacy coverage npm Licence

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

demo.mov

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.