mirror of
https://github.com/lqtmcstudio/QZMusic_PC.git
synced 2026-06-20 23:35:06 +08:00
50 lines
2.1 KiB
Markdown
50 lines
2.1 KiB
Markdown
# AMLL for React
|
|
|
|
English / [简体中文](./README-CN.md)
|
|
|
|
> Warning: This is a personal project and is still under development. There may still be many issues, so please do not use it directly in production environments!
|
|
|
|
|
|
[](https://www.npmjs.com/package/@applemusic-like-lyrics/react)
|
|
[](https://www.npmjs.com/package/@applemusic-like-lyrics/react)
|
|
|
|
React binding for the AMLL component library, which allows you to use AMLL lyric components more conveniently.
|
|
|
|
For more details, please visit [Core component README.md](../core/README.md).
|
|
|
|
## Installation
|
|
|
|
Install the required dependencies (if the dependencies listed below are not installed, you need to install them yourself):
|
|
```bash
|
|
npm install @pixi/app @pixi/core @pixi/display @pixi/filter-blur @pixi/filter-bulge-pinch @pixi/filter-color-matrix @pixi/sprite jss jss-preset-default # using npm
|
|
yarn add @pixi/app @pixi/core @pixi/display @pixi/filter-blur @pixi/filter-bulge-pinch @pixi/filter-color-matrix @pixi/sprite jss jss-preset-default # using yarn
|
|
```
|
|
|
|
Install the dependencies required for React binding (if the dependencies listed below are not installed, you need to install them yourself):
|
|
```bash
|
|
npm install react react-dom # using npm
|
|
yarn add react react-dom # using yarn
|
|
```
|
|
|
|
Install the framework:
|
|
```bash
|
|
npm install @applemusic-like-lyrics/react # using npm
|
|
yarn add @applemusic-like-lyrics/react # using yarn
|
|
```
|
|
|
|
## Usage Summary
|
|
|
|
For detailed API documentation, please refer to [./docs/modules.md](./docs/modules.md)
|
|
|
|
A test program can be found in [../playground/react/src/test.tsx](../playground/react/src/test.tsx).
|
|
|
|
```tsx
|
|
import { LyricPlayer } from "@applemusic-like-lyrics/react";
|
|
|
|
const App = () => {
|
|
const [currentTime, setCurrentTime] = useState(0);
|
|
const [lyricLines, setLyricLines] = useState<LyricLine[]>([]);
|
|
return <LyricPlayer lyricLines={lyricLines} currentTime={currentTime} />
|
|
};
|
|
```
|