🐟「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.

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 />;
};

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

Image source: 大伏アオ @blue00f4 pixiv