boiboif / sakana-react

[Sakana! React!] lycoris石蒜sakana弹弹乐 React开箱即用组件

🐟「Sakana! React!]

English | 简体中文

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

https://www.bbfbbf.cn/

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

Image source: 大伏アオ @blue00f4 pixiv