https://github.com/p-toy-factory/sakana-widget-react

A React component that wrap "Sakana! Widget".
https://github.com/p-toy-factory/sakana-widget-react

Last synced: 7 months ago
JSON representation

A React component that wrap "Sakana! Widget".

• Host: GitHub
• URL: https://github.com/p-toy-factory/sakana-widget-react
• Owner: p-toy-factory
• License: mit
• Created: 2023-12-19T07:56:15.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-02T08:50:30.000Z (9 months ago)
• Last Synced: 2024-11-09T19:49:22.119Z (7 months ago)
• Language: TypeScript
• Homepage: https://sakana-widget-react.pages.dev/
• Size: 385 KB
• Stars: 3
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🐟「Sakana! Widget React」

![Banner](https://socialify.git.ci/p-toy-factory/sakana-widget-react/image?font=KoHo&forks=1&issues=1&logo=https%3A%2F%2Fraw.githubusercontent.com%2Fdsrkafuu%2Fsakana-widget%2Fmain%2Fsrc%2Fcharacters%2Fchisato.png&name=1&pattern=Formal%20Invitation&pulls=1&stargazers=1&theme=Auto)

A [React](https://react.dev/) component that wrap [Sakana! Widget](https://github.com/dsrkafuu/sakana-widget).

[See demo](https://sakana-widget-react.pages.dev/)

## Quick Start

### Install

```

npm install sakana-widget sakana-widget-react

```

### Import CSS

See [usage of Sanaka! Widget's README](https://github.com/dsrkafuu/sakana-widget/tree/main?tab=readme-ov-file#usage), 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**.

```tsx

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

function App() {

	return (

		

	);

}

```

## API

### Props

```ts

import { type DetailedHTMLProps, type HTMLAttributes } from "react";

import { SakanaWidgetOptions } from "sakana-widget";

type DivElementAttributes = Omit<

	DetailedHTMLProps, 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](https://github.com/dsrkafuu/sakana-widget).

Image source: 大伏アオ [@blue00f4](https://twitter.com/blue00f4) [pixiv](https://pixiv.me/aoiroblue1340)

## Contributing

See [CONTRIBUTING.md](https://github.com/p-toy-factory/sakana-widget-react/blob/main/CONTRIBUTING.md).