New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

react-ink

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-ink

A React component for adding material design style ink.


Version published
Weekly downloads
12K
decreased by-11.46%
Maintainers
1
Weekly downloads
 
Created

NPM


Build Status


Add the Material Design ripple effect to React component.

Ink Gif

Usage

Ink must be placed within another component with a position is not static:

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

module.exports = React.createClass({
  render() {
    return (
      <button style={{ position: "relative" }}>
        <Ink />
      </button>
    );
  }
});

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
  duration   : 1000,      // Duration of the full animation completion
  opacity    : 0.25,      // 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
  style      : {...},     // See src/style.js. Any rules set here will extend these values
  hasTouch   : true|false // Override internal hasTouch detection
}

FAQs

Package last updated on 10 Jun 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts