sakana-react
v1.2.0
Published
A react library developed with dumi
Downloads
11
Readme
🐟「Sakana! React!]
sakana-react is a widget react component built with react-spring.
Features
- Build in takina and chisato character and use your own custom character.
- Drag the character and release it, it will jump back and forth around the character.
- Use controler to move your component and change character.
- Support custom controller.
- Auto resizing support.
Usage
First install the package by npm or yarn.
npm i sakana-react
// or
yarn add sakana-react
Use in React component
import SakanaReact from 'sakana-react'
const App = () => {
return (
<SakanaReact />
)
}
API
| Property | Description | Type | Default |
| ----------- | --------------------------- | ------------------------- | ------- |
| width | Width of the component | string
| number
| 200
|
| characterSize | Size of character img | string
| number
| 80%
|
| showLine | Whether the line that connection between character and center is visible or not | boolean
| true
|
| lineWidth | Width of the line | number
| 4
|
| strokeStyle | Canvas stroke settings | string
| #333
|
| style | The style of the wrapper dom | CSSProperties
| -
|
| className | The class name of the wrapper dom | string
| -
|
| character | Build in character image path | takina
| chisato
| -
|
| defaultCharacter | Deafult character image path | takina
| chisato
| takina
|
| customCharacter | Custom character image path | string
| -
|
| onControlerClick | Set the handler to handle controler click event | () => void
| -
|
| controlerSize | Size of Controler | number
| string
| 26
|
| customControler | Custom controler | ReactNode
| -
|
| showControler | Whether the controler is visible or not | boolean
| true
|
License
MIT