react-water-wave
v2.0.1
React wrapper for jquery.ripples, a water ripple effect to your background.
0/weekUpdated 3 years agoMITUnpacked: 15.6 KB
Published by homerchen19
npm install react-water-wavereact-water-wave
[![npm package][npm-badge]][npm]
> This is a React wrapper for sirxemic/jquery.ripples
> It's so cool!
This project was bootstrapped with nwb.
Install
``sh`
$ yarn add react-water-wave
Example
`jsx
import React from 'react';
import { render } from 'react-dom';
import WaterWave from 'react-water-wave';
import image from './path-to/demo.jpg';
const App = () => (
>
{methods => (
/ children components /
)}
);
render(
`
Check demo folder for more complete example.
Props
Modified from sirxemic/jquery.ripples#options
Important: this plugin requires the WebGL extension OES_texture_float (and OES_texture_float_linear for a better effect) and works only with same-origin images.
| Name | Type | Default | Description |
| ----------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| imageUrl | *string | '' | The URL of the image to use as the background. If absent the plugin will attempt to use the value of the computed background-image CSS property instead. Data-URIs are accepted as well. |number
| dropRadius | | 20 | The size (in pixels) of the drop that results by clicking or moving the mouse over the canvas. |number
| perturbance | | 0.03 | Basically the amount of refraction caused by a ripple. 0 means there is no refraction. |number
| resolution | | 256 | The width and height of the WebGL texture to render to. The larger this value, the smoother the rendering and the slower the ripples will propagate. |boolean
| interactive | | true | Whether mouse clicks and mouse movement triggers the effect. |string
| crossOrigin | | '' | The crossOrigin attribute to use for the affected image. For more information see MDN. |
Other props will be passed to the
wrapper which is the root DOM element.Children Functions
By using Render Props pattern to provide the plguin's methods, make sure
Children is a function that receives an object as its only argument.$3
Modified from sirxemic/jquery.ripples#methods
| Method | Parameters | Description |
| ---------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| pause | none | Pause the simulation. |
| play | none | Play the simulation. |
| hide | none | Hide the effect. |
| show | none | Show the effect. |
| drop |
{x: number, y: number, radius: number, strength: number} | Manually add a drop at the element's relative coordinates (x, y). radius controls the drop's size and strength the amplitude of the resulting ripple. |
| destroy | none | Remove the effect from the element. |
| set | { property: string, value } | propertity should be one of:
- dropRadius
-
-
- : setting the image URL will update the background image used for the effect, but the background-image CSS property will be untouched.
- dropRadius: setting this won't have any effect until imageUrl is changed. |
| updateSize | none | The effect resizes automatically when the width or height of the window changes. When the dimensions of the element changes, you need to call updateSize` to update the size of the effect accordingly. |[npm-badge]: https://img.shields.io/npm/v/react-water-wave.svg
[npm]: https://www.npmjs.org/package/react-water-wave
License
MIT © homerchen19