sakana-react
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

🐟「Sakana! React!]

English | 简体中文

NPM

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

Readme

Keywords

none

Package Sidebar

Install

npm i sakana-react

Weekly Downloads

1

Version

1.2.0

License

MIT

Unpacked Size

95 kB

Total Files

15

Last publish

Collaborators

  • boiboif