react-water-wave

This is a React wrapper for sirxemic/jquery.ripples
It's so cool!

DEMO

This project was bootstrapped with nwb.

Install

$ yarn add react-water-wave

Example

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	null	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	bool	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