Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pixijs/pixi-react
Write PIXI apps using React declarative style
https://github.com/pixijs/pixi-react
pixi react react-fiber renderer
Last synced: 25 days ago
JSON representation
Write PIXI apps using React declarative style
- Host: GitHub
- URL: https://github.com/pixijs/pixi-react
- Owner: pixijs
- License: mit
- Created: 2018-03-17T14:29:23.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-08T14:47:15.000Z (7 months ago)
- Last Synced: 2024-05-02T02:02:56.730Z (6 months ago)
- Topics: pixi, react, react-fiber, renderer
- Language: JavaScript
- Homepage: https://pixijs.io/pixi-react/
- Size: 20.8 MB
- Stars: 2,144
- Watchers: 22
- Forks: 165
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-ccamel - pixijs/pixi-react - Write PIXI apps using React declarative style (JavaScript)
README
Pixi React
Simply the best way to write PixiJS applications in React
Write PixiJS applications using React declarative style 👌
Pixi React is an open-source, production-ready library to render high performant PixiJS applications in React.
## Features
- React 17 and 18 support
- PixiJS v6 and v7 support
- react-spring compatible animated components
## Get started
### Quick start
If you want to start a new React project from scratch, we recommend [Vite](https://vitejs.dev/).
To add to an existing React application, just install the dependencies:
#### Start New React Project "my-app" with Create React Vite:
```bash
# for typescript use "--template react-ts"
npx create-vite@latest --template react my-app
cd my-app
```
#### Install Pixi React Dependencies:
```bash
npm install pixi.js@7 @pixi/react@7
```
#### Usage:
```jsx
import { BlurFilter } from 'pixi.js';
import { Stage, Container, Sprite, Text } from '@pixi/react';
import { useMemo } from 'react';
export const MyComponent = () =>
{
const blurFilter = useMemo(() => new BlurFilter(4), []);
return (
);
};
```
### Docs
Check out [our documentation](https://pixijs.io/pixi-react/) for guides and a full API reference.
Or checkout [our examples](https://codepen.io/collection/XPpGdb) on codepen for inspiration.
## Contribute
Want to contribute to Pixi React? Our [contributing guide](/.github/CONTRIBUTING.md) has you covered.
## License
Pixi React is MIT licensed.
This project was originally created and maintained by @inlet. He graciously gave the Pixi team the keys to maintain and push the project forward. Big thanks for all the hard work on making this project so awesome.
This projects codebase was originally forked from @michalochman 's [react-pixi-fiber](https://github.com/michalochman/react-pixi-fiber).
## Meet fellow developers
You have an amazing feature in mind or just want to get in touch with other developers? Feel free to join our Discord channel.
[Join us on Discord](https://discord.gg/zqbXQAADuM)