/sakana-react

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

Primary LanguageTypeScriptMIT LicenseMIT

🐟「Sakana! React!]

English | 简体中文

NPM

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

https://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