React Ink Save

A React component for adding material design style ink

Project README

React Ink

CircleCI npm npm

Add the Material Design ripple effect to React component.

Ink Gif


Ink must be placed within another component with a position is not static (so relative, fixed, or absolute).

import React from 'react'
import Ink from 'react-ink'

const InkeyButton () => {
  return (
    <button style={{ position: "relative" }}>
      <Ink />

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


  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 to see more projects from Viget.

Open Source Agenda is not affiliated with "React Ink" Project. README Source: vigetlabs/react-ink
Open Issues
Last Commit
1 year ago

Open Source Agenda Badge

Open Source Agenda Rating