Package Exports

react-ink

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-ink) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Ink

Add ink to any react component.

Ink Gif

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
}