Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/homerchen19/react-water-wave

💧React.js jquery.ripples integration component.
https://github.com/homerchen19/react-water-wave

Last synced: 1 day ago
JSON representation

💧React.js jquery.ripples integration component.

Host: GitHub
URL: https://github.com/homerchen19/react-water-wave
Owner: homerchen19
License: mit
Created: 2018-08-15T15:18:17.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2022-12-08T23:39:53.000Z (almost 2 years ago)
Last Synced: 2024-10-28T16:10:07.039Z (11 days ago)
Language: TypeScript
Homepage: https://homerchen19.github.io/react-water-wave/
Size: 11.4 MB
Stars: 67
Watchers: 2
Forks: 8
Open Issues: 27
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

# react-water-wave

[![npm package][npm-badge]][npm]

> This is a React wrapper for [sirxemic/jquery.ripples](https://github.com/sirxemic/jquery.ripples)

> It's so cool!

[**DEMO**](https://homerchen19.github.io/react-water-wave/)

This project was bootstrapped with [nwb](https://github.com/insin/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(, document.querySelector('#root'));
```

Check [demo folder](https://github.com/homerchen19/react-water-wave/tree/master/demo/src) for more complete example.

# Props

Modified from [sirxemic/jquery.ripples#options](https://github.com/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](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes). |

Other props will be passed to the `

` wrapper which is the root DOM element.

# Children Functions

By using [Render Props](https://reactjs.org/docs/render-props.html) 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](https://github.com/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. |

[npm-badge]: https://img.shields.io/npm/v/react-water-wave.svg
[npm]: https://www.npmjs.org/package/react-water-wave

## License