🐟「Sakana! Widget React」

A React component that wrap Sakana! Widget.

See demo

Quick Start

Install

npm install sakana-widget sakana-widget-react

Import CSS

See usage of Sanaka! Widget's README, choose a method you prefer to import CSS.

Use component

options property of SanakaWidget component will be used as parameter of constructor of SanakaWidget class.

import { SanakaWidget } from "sakana-widget-react";

function App() {
	return (
		<SanakaWidget
			options={{
				character: "takina",
				title: true,
			}}
		/>
	);
}

API

Props

import { type DetailedHTMLProps, type HTMLAttributes } from "react";
import { SakanaWidgetOptions } from "sakana-widget";

type DivElementAttributes = Omit<
	DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
	"key" | "ref"
>;

export interface SakanaWidgetProps extends DivElementAttributes {
	/** @default false */
	disableBounceOnMount?: boolean;
	options: SakanaWidgetOptions;
}

License

Released under MIT License, please note that the 2 default images should not be used for any commercial activities. This project used to be a secondary development based on Sakana! Widget.

Image source: 大伏アオ @blue00f4 pixiv

Contributing

See CONTRIBUTING.md.