Giter VIP home page Giter VIP logo

react-ink's Introduction

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 (so relative, fixed, or absolute).

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
}

Code At Viget

Visit code.viget.com to see more projects from Viget.

react-ink's People

Contributors

nhunzaker avatar khinlatt avatar solomonhawk avatar tomatau avatar

Watchers

James Cloos avatar Jonathan Glanz avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.