History

Javi Velasco 055c6e37a9 Add ripple documentation		2015-12-20 19:18:31 +01:00
..
Ripple.jsx	Move Ripple main to Decorator approach	2015-12-07 02:34:12 +01:00
_config.scss	Add ripple decorator and use it in button and checkbox	2015-12-06 14:35:10 +01:00
index.js	Remove jsx extension from component index files, replace with js	2015-11-22 17:49:46 -05:00
readme.md	Add ripple documentation	2015-12-20 19:18:31 +01:00
style.scss	Add ripple decorator and use it in button and checkbox	2015-12-06 14:35:10 +01:00

readme.md

Ripple

The ripple is a surface reaction that happens when the user interacts with the component. It's useful to provide feedback about a click or touch action. In React Toolbox it's implemented as an higher order component (HOC) being a requirement for the child to implement children and onMouseDown props. Also it should be placed as relative. Hiding the overflow is up to you.

import Ripple from 'react-toolbox/lib/ripple';

const Link = (props) => (
  <a {...props} style={{position: 'relative'}}>
    {props.children}
  </a>
);

const RippleLink = Ripple({spread: 3})(Link);
const RippleTest = () => <RippleLink href='#'>Test</RippleLink>;

Properties

In any component you decorate with the Ripple you'd get some additional props:

Name	Type	Default	Description
`centered`	`Boolean`	`false`	True in case you want a centered ripple.
`className`	`String`	`''`	String to customize appearance (color and opacity for example).
`spread`	`Number`	`2`	Factor to indicate how much should the ripple spread under the component.