-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
217 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -27,3 +27,4 @@ lib/react-wavify.module.dev.js | |
| lib/react-wavify.module.js | ||
| /lib/index.d.ts | ||
| /demo/yarn.lock | ||
| test.css | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
|
|
||
|
|
||
| # 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 = () => ( | ||
| <Wave fill='#f79902' | ||
| paused={false} | ||
| style={{ display: 'flex' }} | ||
| options={{ | ||
| height: 20, | ||
| amplitude: 20, | ||
| speed: 0.15, | ||
| points: 3 | ||
| }} | ||
| /> | ||
| ) | ||
| ``` | ||
|
|
||
| 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 `<defs>` elements can be used to add gradients, clipping paths, or masks. | ||
|
|
||
| ##### Using a Gradient | ||
|
|
||
| ```jsx | ||
| <Wave fill="url(#gradient)"> | ||
| <defs> | ||
| <linearGradient id="gradient" gradientTransform="rotate(90)"> | ||
| <stop offset="10%" stopColor="#d4af37" /> | ||
| <stop offset="90%" stopColor="#f00" /> | ||
| </linearGradient> | ||
| </defs> | ||
| </Wave> | ||
| ``` | ||
|
|
||
|  | ||
|
|
||
| ##### Using a Clipping Path | ||
|
|
||
| ```jsx | ||
| <Wave fill="#e62315" mask="url(#mask)" options={{ points: 20, speed: 0.2, amplitude: 40 }}> | ||
| {/* Example adapted from https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask */} | ||
| <mask id="mask"> | ||
| <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="white" /> | ||
| </mask> | ||
| </Wave> | ||
| ``` | ||
|
|
||
|  | ||
|
|
||
| ##### Using a Mask | ||
|
|
||
| ```jsx | ||
| <Wave mask="url(#mask)" fill="#1277b0" > | ||
| <defs> | ||
| <linearGradient id="gradient" gradientTransform="rotate(90)"> | ||
| <stop offset="0" stopColor="white" /> | ||
| <stop offset="0.5" stopColor="black" /> | ||
| </linearGradient> | ||
| <mask id="mask"> | ||
| <rect x="0" y="0" width="2000" height="200" fill="url(#gradient)" /> | ||
| </mask> | ||
| </defs> | ||
| </Wave> | ||
| ``` | ||
|
|
||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| @import "tailwindcss"; | ||
|
|
||
| @theme { | ||
| --color-*: initial; | ||
|
|
||
| --color-accent: #ffd4bd; | ||
| --color-background: #111110; | ||
| --color-secondary: #dbdbdb; | ||
| --color-black: #000000; | ||
| --color-white: #ffffff; | ||
| --color-code: #030202; | ||
| --color-textcode: #aaaaca; | ||
|
|
||
| --color-inherit: inherit; | ||
| --color-current: currentColor; | ||
| --color-transparent: transparent; | ||
| --color-primary: #bf8855; | ||
| --color-primaryHover: #bf8855e6; | ||
| --color-secondary: #fadc96; | ||
| --color-blue: #5e9ef1; | ||
| --color-darkBlue: #3268ce; | ||
| --color-selection: #fff9cc; | ||
| --fonts-title: 'Quicksand', sans-serif; | ||
| } | ||
|
|
||
| @layer utilities { | ||
| .feature-list { | ||
| list-style-type: none; | ||
| } | ||
| .feature-list > li:before { | ||
| content: "- "; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.