https://github.com/vigetlabs/react-ink

A React component for adding material design style ink
https://github.com/vigetlabs/react-ink

Last synced: 3 months ago
JSON representation

A React component for adding material design style ink

• Host: GitHub
• URL: https://github.com/vigetlabs/react-ink
• Owner: vigetlabs
• License: mit
• Created: 2014-11-24T16:34:45.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2023-06-03T12:01:19.000Z (over 1 year ago)
• Last Synced: 2024-07-25T20:22:13.034Z (3 months ago)
• Language: JavaScript
• Homepage: https://react-ink.netlify.com/
• Size: 909 KB
• Stars: 324
• Watchers: 29
• Forks: 36
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-list - react-ink

README

        
# React Ink

[![CircleCI](https://img.shields.io/circleci/project/vigetlabs/react-ink.svg?maxAge=2592000)](https://circleci.com/gh/vigetlabs/react-ink)

[![npm](https://img.shields.io/npm/v/react-ink.svg?maxAge=2592000)](https://www.npmjs.com/package/react-ink)

[![npm](https://img.shields.io/npm/dm/react-ink.svg?maxAge=2592000)](https://www.npmjs.com/package/react-ink)

Add the Material Design ripple effect to React component.

![Ink Gif](http://cl.ly/image/1r36102z0M3r/ink.gif)

## Usage

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

```js

import React from 'react'

import Ink from 'react-ink'

const InkeyButton () => {

  return (

    

      

    

  )

}

```

There are several options available for how `` renders, see the [`getDefaultProps()` declaration](https://github.com/vigetlabs/react-ink/blob/master/src/index.js#L33-L37), however descriptions follow:

## Configuration

```javascript

{

  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

}

```

***



  



Visit [code.viget.com](http://code.viget.com) to see more projects from [Viget.](https://viget.com)