2.0.4 • Published 4 months ago
sakana-react-v2 v2.0.4
🐟「Sakana! React!] 石蒜React小组件
sakana-react 是一个使用 react-spring 构建的开箱即用的React组件,把它添加到你的React应用中吧!
Features
- 内置泷奈和千束角色图像并且可以使用自定义图像。
- 拖动角色后释放,会以角色为中心向反方向来回弹跳。
- 可以通过控制器切换角色图像,和拖动组件到别的位置。
- 支持自定义控制器。
- 支持响应式调整大小。
Usage
通过npm或yarn包的形式安装组件。
npm i sakana-react-v2
// or
yarn add sakana-react-v2
作为React组件引入并使用
import SakanaReact from 'sakana-react-v2'
const App = () => {
return (
<SakanaReact />
)
}
API
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 | - |
onControllerClick | 控制器点击事件 | () => void | - |
controllerSize | 控制器大小 | number | string | 26 |
customController | 自定义控制器 | ReactNode | - |
showController | 是否显示控制器 | boolean | true |
License
MIT