react-toolbox-build4server
Version:
Builds react-toolbox in such a way that it's components can be required and used in node - most likely for server-side rendered webapps - without having to depend on webpack to build your entire server-side project
28 lines (20 loc) • 1.19 kB
Markdown
# 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.
<!-- example -->
```jsx
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.|