https://github.com/froyog/react-touch-ripple
Create ripple effect from Material Design with React
https://github.com/froyog/react-touch-ripple
material material-design react react-component ripple ripple-effect touch-ripple-component
Last synced: 3 months ago
JSON representation
Create ripple effect from Material Design with React
- Host: GitHub
- URL: https://github.com/froyog/react-touch-ripple
- Owner: froyog
- License: mit
- Created: 2018-04-26T05:15:27.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T17:39:34.000Z (over 3 years ago)
- Last Synced: 2026-03-16T00:46:25.687Z (4 months ago)
- Topics: material, material-design, react, react-component, ripple, ripple-effect, touch-ripple-component
- Language: JavaScript
- Homepage: https://froyog.github.io/react-touch-ripple
- Size: 1.83 MB
- Stars: 31
- Watchers: 1
- Forks: 6
- Open Issues: 24
-
Metadata Files:
- Readme: README-zh_CN.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Touch Ripple
Material Design 风格涟漪（Ripple）组件
[](https://travis-ci.org/froyog/react-touch-ripple) [](https://github.com/froyog/react-touch-ripple/blob/master/LICENSE)
[English](./README.md)
## 安装
```bash
npm install react-touch-ripple --save
```
## 使用
### 基本
```jsx
import Ripples from 'react-touch-ripple';
const Demo = () => (
CLICK
);
ReactDOM.render(, tree);
```
### 自定义样式
说明：我们提供的 `` 组将包裹了内部组件（此例中包裹了``）。所以如果你要给 `` 添加 `box-shadow` 或 `margin` 这种样式时，记得加在 `` 组件上，而不是 ``。
```jsx
const StyledWrapperDemo = () => (
CLICK
);
```
### 改变颜色
涟漪的 `background-color` 的默认值是 `currentColor`。你可以传递 `color` 来改变这个值
```jsx
const ColoredDemo = () => (
CLICK
);
```
重要说明：`` 上已经设置了 `opacity: 0.3` 所以无需自行添加透明度的样式。
```jsx
```
这样子是不对的。
### 居中
在 switch 或 checkbox 上调加 Ripple 时，一般希望 Ripple 能够居中，这时可以传递 center 使所有 ripple 居中。参见 [demo](https://froyog.github.io/react-touch-ripple)
```jsx
const RippleSwitch = () => (
);
```
## 设计指南
参见 [Choreography](https://material.io/guidelines/motion/choreography.html)
## License
[MIT](./LICENSE)