react-water-wave
This is a React wrapper for sirxemic/jquery.ripples
It's so cool!
This project was bootstrapped with nwb.
Install
$ yarn add react-water-waveExample
import React from 'react';
import { render } from 'react-dom';
import WaterWave from 'react-water-wave';
import image from './path-to/demo.jpg';
const App = () => (
<WaterWave
imageUrl={image}
>
{methods => (
/* children components */
)}
</WaterWave>
);
render(<App />, document.querySelector('#root'));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. |
| dropRadius | number |
20 |
The size (in pixels) of the drop that results by clicking or moving the mouse over the canvas. |
| perturbance | number |
0.03 |
Basically the amount of refraction caused by a ripple. 0 means there is no refraction. |
| resolution | number |
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. |
| interactive | boolean |
true |
Whether mouse clicks and mouse movement triggers the effect. |
| crossOrigin | string |
'' |
The crossOrigin attribute to use for the affected image. For more information see MDN. |
Other props will be passed to the <div> 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.
Methods
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- perturbance- interactive- imageUrl: 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. |
License
MIT © homerchen19