/react-pixi

Write PIXI apps using React declarative style

Primary LanguageJavaScriptMIT LicenseMIT

React PixiJS

CircleCI

Write PixiJS applications using React declarative style.

logo

Install

yarn add @inlet/react-pixi

or

npm install @inlet/react-pixi --save

Usage

With ReactDOM

import { Stage, Sprite } from '@inlet/react-pixi'

const App = () => (
  <Stage>
    <Sprite image="./bunny.png" x={100} y={100} />
  </Stage>
)

This example will render a PIXI.Sprite object into a Root Container of a PIXI.Application on the page. The Stage object will create a valid <canvas /> element to render to.

Without ReactDOM

import { render, Text } from '@inlet/react-pixi'
import { Application } from 'pixi.js'

// Setup PIXI app
const app = new Application({
  width: 800,
  height: 600,
  backgroundColor: 0x10bb99,
  view: document.getElementById('container'),
})

// Use the custom renderer to render a valid PIXI object into a PIXI container.
render(<Text text="Hello World" x={200} y={200} />, app.stage)

Examples

Watch the collection on codepen.

Custom Components

Currently the following Components are implemented by default:

You can easily add new components to your project:

./components/Rectangle.js

import { Graphics } from 'pixi.js'
import { PixiComponent } from '@inlet/react-pixi'

export default PixiComponent('Rectangle', {
  create: props => {
    return new Graphics()
  },
  didMount: (instance, parent) => {
    // apply custom logic on mount
  },
  willUnmount: (instance, parent) => {
    // clean up before removal
  },
  applyProps: (instance, oldProps, newProps) => {
    const { fill, x, y, width, height } = newProps
    instance.clear()
    instance.beginFill(fill)
    instance.drawRect(x, y, width, height)
    instance.endFill()
  },
})

App.js

import { Stage } from '@inlet/react-pixi'
import Rectangle from './components/Rectangle'
export default () => (
  <Stage>
    <Rectangle x={100} y={100} width={500} height={300} fill={0xff0000} />
  </Stage>
)

Access the PIXI.Application in child components

Consider this rotating bunny example:

./components/RotatingBunny.jsx

import { Sprite } from '@inlet/react-pixi'

class RotatingBunny extends React.Component {
  state = { rotation: 0 }

  componentDidMount() {
    this.props.app.ticker.add(this.tick)
  }

  componentWillUnmount() {
    this.props.app.ticker.remove(this.tick)
  }

  tick = delta => {
    this.setState(({ rotation }) => ({
      rotation: rotation + 0.1 * delta,
    }))
  }

  render() {
    return <Sprite image="./bunny.png" rotation={this.state.rotation} />
  }
}

There are 2 ways of accessing the PIXI.Application instance.

  1. Using AppConsumer and pass the instance via render props:

App.jsx

import { Stage, Container, AppConsumer } from '@inlet/react-pixi'
import { RotatingBunny } from './components/RotatingBunny'

export default () => (
  <Stage>
    <Container>
      <AppConsumer>{app => <RotatingBunny app={app} />}</AppConsumer>
    </Container>
  </Stage>
)
  1. Or use a Higher Order Component:

App.jsx

import { Stage, Container, withPixiApp } from '@inlet/react-pixi'
import { RotatingBunny } from './components/RotatingBunny'

const BunnyWithApp = withPixiApp(RotatingBunny)

export default () => (
  <Stage>
    <Container>
      <BunnyWithApp />
    </Container>
  </Stage>
)
  1. Use hooks API in Functional Components

RotatingBunny.jsx

import { useApp } from '@inlet/react-pixi'

function RotatingBunny(props) {
  const app = useApp()
  // app => PIXI.Application

  return (
    ...
  )
}

API

<Stage />

Renders Root Container of a PIXI.Application.

Props:

  • width the width of the renderers view, default 800
  • height the height of the renderers view, default 600
  • onMount a callback function for the created app instance
  • onUnMount a callback function when the Stage gets unmounted
  • raf use the internal PIXI ticker (requestAnimationFrame) to render the stage, default true
  • renderOnComponentChange render stage when the Stage component updates. This is ignored if raf is true.
  • options see PIXI.Application options

The Stage stores the created PIXI.Application instance to context, which can be accessed using a Provider or a Higher Order Component.

Components

Pass component options as props, example:

import { Sprite } from '@inlet/react-pixi'

const MyComponent = () => <Sprite image=".image.png" x={100} y={200} />

The image prop here is a short-hand for PIXI.Sprite.from():

import { Sprite } from '@inlet/react-pixi'

const texture = new PIXI.Sprite.fromImage('./image.png')

const MyComponent = () => <Sprite texture={texture} x={100} y={200} />

Scripts

# compile umd & es builds
yarn build

# compile dev builds
yarn build:dev

# compile production builds
yarn build:prod

# watch development builds
yarn build:watch

# lint code
yarn eslint

# fix linting issues
yarn eslint --fix

# test
yarn test

# watch tests
yarn test:watch

Resources