🐟「Sakana! React!]
sakana-react-v2 is a widget react component built with react-spring.
Features
- Built in Takina and Chisato or use your own custom character.
- Drag the character and release it; it will jump back and forth.
- Use the controller to move your component and change character.
- Custom controller support.
- Auto resizing support.
Usage
First install the package by npm or yarn.
npm i sakana-react-v2
// or
yarn add sakana-react-v2
Use in React component
import SakanaReact from 'sakana-react-v2'
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 |
- |
onControllerClick | Set the handler to handle controller click event | () => void |
- |
controllerSize | Size of controller |
number | string
|
26 |
customController | Custom controller | ReactNode |
- |
showController | Whether the controller is visible or not | boolean |
true |
License
MIT