7.1.2 • Published 9 months ago

@pixi/react v7.1.2

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

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 Create React App. To add to an existing React application, just install the dependencies:

Start New React Project "my-app" with Create React App:

# for typescript add "--template typescript"
npx create-react-app my-app
cd my-app

Install Pixi React Dependencies:

npm install pixi.js @pixi/react

Usage:

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 (
    <Stage options={{ background: 0xffffff }}>
      <Sprite
        image="https://pixijs.io/pixi-react/img/bunny.png"
        x={400}
        y={270}
        anchor={{ x: 0.5, y: 0.5 }}
      />

      <Container x={400} y={330}>
        <Text text="Hello World" anchor={{ x: 0.5, y: 0.5 }} filters={[blurFilter]} />
      </Container>
    </Stage>
  );
};

Docs

Check out our documentation for guides and a full API reference.

Or checkout our examples on codepen for inspiration.

Contribute

Want to contribute to Pixi React? Our contributing guide 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.

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

8.0.0-beta.14

9 months ago

8.0.0-beta.13

10 months ago

8.0.0-beta.12

10 months ago

8.0.0-beta.11

10 months ago

8.0.0-dev.3060c8f

12 months ago

8.0.0-dev.6562a1e

11 months ago

8.0.0-dev.a80247a

12 months ago

8.0.0-dev.9db4138

12 months ago

8.0.0-dev.4657710

12 months ago

8.0.0-alpha.2

11 months ago

8.0.0-beta.6

11 months ago

8.0.0-beta.8

10 months ago

8.0.0-beta.7

11 months ago

8.0.0-beta.9

10 months ago

8.0.0-beta.2

11 months ago

8.0.0-beta.10

10 months ago

8.0.0-beta.1

11 months ago

8.0.0-beta.4

11 months ago

8.0.0-beta.3

11 months ago

8.0.0-dev.fa3ceb9

12 months ago

8.0.0-dev.5f642a6

12 months ago

8.0.0-dev.d3a3d22

12 months ago

8.0.0-dev.3ad17ce

12 months ago

8.0.0-dev.324e90e

12 months ago

8.0.0-dev.500919f

11 months ago

8.0.0-dev.64bc403

12 months ago

8.0.0-dev.2cf4a08

11 months ago

8.0.0-dev.5ba3bcc

12 months ago

8.0.0-dev.815cb8f

12 months ago

8.0.0-dev.908514a

12 months ago

8.0.0-dev.7f5782b

12 months ago

8.0.0-dev.6b268b5

11 months ago

8.0.0-dev.e0cf4a7

12 months ago

8.0.0-dev.ccd81d6

12 months ago

8.0.0-dev.ec3b6aa

12 months ago

8.0.0-dev.6a76d38

11 months ago

8.0.0-dev.77b1559

12 months ago

8.0.0-dev.f648739

12 months ago

8.0.0-dev.af1ac9b

12 months ago

8.0.0-dev.f3abf87

11 months ago

8.0.0-dev.89cdf11

12 months ago

8.0.0-dev.fdeaea4

12 months ago

7.1.2

1 year ago

7.1.1

2 years ago

7.1.0

2 years ago

7.0.3

2 years ago

7.0.0

2 years ago

7.0.2

2 years ago

7.0.1

2 years ago

7.0.0-alpha.2

2 years ago

7.0.0-alpha.1

2 years ago