🐟「Sakana! React!]

English | 简体中文

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

https://bbf-blog.netlify.app/

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