Skip to content

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

License

Notifications You must be signed in to change notification settings

Skyline-9/sakana-react-v2

 
 

Repository files navigation

🐟「Sakana! React!]

English | 简体中文

NPM

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

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 80.3%
  • CSS 14.3%
  • HTML 3.0%
  • JavaScript 2.4%