sakana-react 是一个使用 react-spring 构建的开箱即用的 React 组件，把它添加到你的 React 应用中吧！
- 内置泷奈和千束角色图像并且可以使用自定义图像。
- 拖动角色后释放，会以角色为中心向反方向来回弹跳。
- 可以通过控制器切换角色图像，和拖动组件到别的位置。
- 支持自定义控制器。
- 支持响应式调整大小。
通过 npm 或 yarn 包的形式安装组件。
npm i sakana-react
// or
yarn add sakana-react作为 React 组件引入并使用
import { SakanaReact } from 'sakana-react';
const App = () => {
return <SakanaReact />;
};| Property | Description | Type | Default |
|---|---|---|---|
| width | 组件的宽度 | string | number |
200 |
| characterSize | 角色图像大小 | string | number |
80% |
| showLine | 是否显示图像和中心间的连线 | boolean |
true |
| lineWidth | 连线的宽度 | number |
4 |
| strokeStyle | canvas 线条设置 | string |
#333 |
| style | 最外层容器样式 | CSSProperties |
- |
| className | 最外层容器的类名 | string |
- |
| character | 角色图像(受控) | takina | chisato |
- |
| defaultCharacter | 默认角色图像 | takina | chisato |
takina |
| customCharacter | 自定义角色图像 | string |
- |
| onControlerClick | 控制器点击事件 | () => void |
- |
| controlerSize | 控制器大小 | number | string |
26 |
| customControler | 自定义控制器 | ReactNode |
- |
| showControler | 是否显示控制器 | boolean |
true |
MIT