React Waves Component

An effect for react components.

Installation and usage

The easiest way to use react-waves is to install it from npm and build it into your app with Webpack.

$ npm install react-waves
$ yarn add react-waves

Then use it in your app:

  import Waves from 'react-waves';

  <Waves>
    <button>Button</button>
  </Waves>

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

• node: DOM node
• propertyName: A string containing a CSS property.

Props

Waves.propTypes = {
  throttleTimer: PropTypes.number, // Effect duration
  duration: PropTypes.number, // Effect duration
  delay: PropTypes.number, // Effect delay
  float: PropTypes.bool,
  children: PropTypes.node,
  borderRadius: PropTypes.number,
  circleRadius: PropTypes.number,
  rippleBackgroud: PropTypes.string,
  rippleBackgroundGradients: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.arrayOf(PropTypes.string),
  ]),
  onStartRipple: PropTypes.func,
  onEndRipple: PropTypes.func,
};

Waves.defaultProps = {
  throttleTimer: 0,
  duration: 500,
  delay: 200,
  float: false,
  borderRadius: 0,
  circleRadius: 0,
  rippleBackgroud: 'rgba(0, 0, 0, 0.2)',
  rippleBackgroundGradients: ['rgba(0, 0, 0, 0.2)', 'rgba(0, 0, 0, 0.3)', 'rgba(0, 0, 0, 0.4)', 'rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0)'],
};

Author

Erick Wang

License

This project is licensed under the MIT license.