react-ink

React Ink

Add ink to any react component.

Usage

Include ./ink.css within your stylesheet build process. Then you can include the <Ink /> component like so:

var React = require('react');
var Ink = require('react-ink');

module.exports = React.createClass({
  render() {
    return (
      <div>
        <Ink />
      </div>
    );
  }
});

There are several options available for how <Ink /> renders, see the getDefaultProps() declaration, however descriptions follow:

Configuration

{
  background : true, // When true, pressing the ink will cause the background to fill with the current color
  color      : null, // When set, this will override the css rule `fill: currentColor`
  duration   : 1500, // Duration of the full animation completion
  opacity    : 0.2,  // The opacity of the ink blob
  radius     : 150,  // The size of the effect, will not exceed bounds of containing element
  recenter   : true  // When true, recenter will pull ink towards the center of the containing element
}