Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/woofers/react-wavify
🏝️ 🌊 Animated wave component for React
https://github.com/woofers/react-wavify
animation component react reactjs svg wave
Last synced: 6 days ago
JSON representation
🏝️ 🌊 Animated wave component for React
- Host: GitHub
- URL: https://github.com/woofers/react-wavify
- Owner: woofers
- License: mit
- Created: 2019-02-15T03:31:44.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-08-17T23:37:09.000Z (4 months ago)
- Last Synced: 2024-11-29T06:06:00.471Z (13 days ago)
- Topics: animation, component, react, reactjs, svg, wave
- Language: TypeScript
- Homepage: https://jaxs.onl/react-wavify/
- Size: 14.6 MB
- Stars: 337
- Watchers: 6
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - react-wavify
README
# React Wavify
[](https://github.com/woofers/react-wavify/actions) [](https://www.npmjs.com/package/react-wavify) [](https://www.npmjs.com/package/react-wavify) [](https://bundlephobia.com/result?p=react-wavify) [](https://github.com/woofers/react-wavify/blob/main/LICENSE)
A simple React component which creates an animated wave.
**[Live Demo](https://jaxs.onl/react-wavify/)**
This component is heavily adapted from [Mikołaj Stolarski](https://github.com/grimor)'s awesome [Codepen](https://codepen.io/grimor/pen/qbXLdN)
and is functionally similar to [Benjamin Grauwin](http://benjamin.grauwin.me/)'s [Wavify](https://github.com/peacepostman/wavify) plug-in.
# Installation
**Yarn**
```yarn
yarn add react-wavify
```
**npm**
```npm
npm install react-wavify
```
# Usage
```jsx
import React from 'react'
import Wave from 'react-wavify'
const App = () => (
)
```
Simply add the Wave component to the React application using JSX.
The wave's width will scale to fit the parent container.
## Props
### Fill
The `fill` property can be set to anything that a SVG path can accept (usually gradients or colors). **Default:** `#FFF`
### Paused
The `paused` property controls the play state of the animation. **Default:** `false`
If set to `true` the wave animation will pause.
### Options
The component supports a variety of options to affect how the wave is rendered.
Any omitted options will be set to the default value.
- `height` - Height of the wave relative to the SVG element. **Default:** `20`
- `amplitude` - Amplitude of the rendered wave. **Default:** `20`
- `speed` - Speed that the wave animation plays at. **Default:** `0.15`
- `points` - Amount of points used to form the wave.
Can not be less than `1`. **Default:** `3`
### Pass Through Props
Any other props such as `id`, `className` or `style` will be passed through to the root of the component.
Other props such as `opacity` or `stroke` will be passed to the SVG path element.
Any other elements can be passed inside the SVG component itself.
Inner `` elements can be used to add gradients, clipping paths, or masks.
##### Using a Gradient
```jsx
```
##### Using a Clipping Path
```jsx
{/* Example adapted from https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask */}
```
##### Using a Mask
```jsx
```
