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 (8 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」

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).