🐟「Sakana! React!]

English | 简体中文

sakana-react-v2 is a widget react component built with react-spring.

https://www.bbfbbf.cn/

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

Image source: 大伏アオ @blue00f4 pixiv