rww

react-water-wave

💧React.js jquery.ripples integration component.

Showing:

Popularity

Downloads/wk

56

GitHub Stars

48

Maintenance

Last Commit

1yr ago

Contributors

2

Package

Dependencies

5

Size (min+gzip)

38.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-water-wave

npm package

screen shot 2018-08-16 at 01 22 16

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.

NameTypeDefaultDescription
imageUrlstringnullThe 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.
dropRadiusnumber20The size (in pixels) of the drop that results by clicking or moving the mouse over the canvas.
perturbancenumber0.03Basically the amount of refraction caused by a ripple. 0 means there is no refraction.
resolutionnumber256The 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.
interactivebooltrueWhether mouse clicks and mouse movement triggers the effect.
crossOriginstring''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

MethodParametersDescription
pausenonePause the simulation.
playnonePlay the simulation.
hidenoneHide the effect.
shownoneShow 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.
destroynoneRemove 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.
updateSizenoneThe 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100