# @sinoui/ripple

> 遵循 Material Design 的涟漪效果实现。

Latest version **1.0.13** (published 2022-03-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sinoui/ripple
pnpm add @sinoui/ripple
yarn add @sinoui/ripple
bun add @sinoui/ripple
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.13 |
| Published | 2022-03-25 |
| First published | 2019-03-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 101.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | jackingliu, longniansheng, tianyanqiu, chenaihua, maitian0222 |

## Links

- npm: https://www.npmjs.com/package/@sinoui/ripple
- Repository: https://github.com/sinoui/ripple
- Homepage: https://sinoui.github.io/ripple
- Issues: https://github.com/sinoui/ripple/issues
- npm.io page: https://npm.io/package/@sinoui/ripple

## Dependencies (6)

- [keycode](https://npm.io/package/keycode.md) ^2.2.0
- [warning](https://npm.io/package/warning.md) ^4.0.3
- [is-mobile](https://npm.io/package/is-mobile.md) ^3.1.1
- [dom-helpers](https://npm.io/package/dom-helpers.md) ^3.4.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.6.3
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.6.0

## Recent versions

- 1.0.13 (latest) — 2022-03-25
- 1.0.12 — 2020-04-19
- 1.0.11 — 2020-03-14
- 1.0.10 — 2020-01-19
- 1.0.9 — 2020-01-14
- 1.0.8 — 2020-01-14
- 1.0.7 — 2019-12-20
- 1.0.6 — 2019-12-20
- 1.0.5 — 2019-12-19
- 1.0.4 — 2019-11-08
- 1.0.3 — 2019-10-26
- 1.0.2 — 2019-10-23
- 1.0.1 — 2019-10-22
- 1.0.0 — 2019-10-21
- 0.2.0 — 2019-09-21
- … 23 more at https://npm.io/package/@sinoui/ripple/versions

## README

# ripple [![npm version](https://img.shields.io/npm/v/@sinoui/ripple)](https://www.npmjs.com/package/@sinoui/ripple) [![downloads](https://img.shields.io/npm/dm/@sinoui/ripple)](https://www.npmjs.com/package/@sinoui/ripple)

涟漪效果。遵循 [Material Design States](https://material.io/design/interaction/states.html#usage) 规范。 [文档](https://sinoui.github.io/ripple)

## 安装

```shell
yarn add @sinoui/ripple
```

## 使用

```tsx
import { useRipple } from '@sinoui/ripple';

function Button({ disabled, ...rest }) {
  const ref = useRipple({ disabled });

  return <button ref={ref} disabled={disabled} {...rest} />;
}
```

## 本地开发

项目中有以下有用的命令。

### `yarn start`

在开发和监听模式下启动项目。当代码发生变化时就会重新编译代码。它同时会实时地向你汇报项目中的代码错误。

### `yarn build`

打包，并将打包文件放在`dist`文件夹中。使用 rollup 对代码做优化并打包成多种格式（`Common JS`，`UMD`和`ES Module`）。

### `yarn lint`

`yarn lint`会检查整个项目是否有代码错误、风格错误。

开启 vscode 的 eslint、prettier 插件，在使用 vscode 编码时，就会自动修正风格错误、提示语法错误。

### `yarn format`

`yarn format`可以自动调整整个项目的代码风格问题。

### `yarn test`

`yarn test`以监听模式启动 jest，运行单元测试。

开启 vscode 的 jest 插件，会在文件变化时自动运行单元测试。

### `yarn release`

发布库到 npm 中的命令：`yarn release`。

### 预览文档

```shell
yarn doc:dev
```

### 编译并打包文档

```shell
yarn doc:publish
```

### 发布文档

```shell
yarn doc:publish
```

---
_Source: https://npm.io/package/@sinoui/ripple · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._