React-water-wave NPM

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-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`	`''`	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.