sakana-react is a widget react component built with react-spring.
- 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.
First install the package by npm or yarn.
npm i sakana-react
// or
yarn add sakana-reactUse in React component
import { SakanaReact } from 'sakana-react';
const App = () => {
return <SakanaReact />;
};| 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 |
MIT