Write PixiJS applications using React declarative style.
yarn add @inlet/react-pixi
or
npm install @inlet/react-pixi --save
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.
import { render, Text } from '@inlet/react-pixi'
import * as PIXI from 'pixi.js'
// Setup PIXI app
const app = new PIXI.Application(800, 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)
Watch the collection on codepen.
- Text
- Sprite - Rotating Bunny
- Tiling Sprite
- Graphics
- Interaction - Click
- Rope
- Custom Components
- NineSlicePlane
- Custom Render - Without Stage
Currently the following Components are implemented by default:
You can easily add new components to your project:
./components/Rectangle.js
import * as PIXI from 'pixi.js'
import { PixiComponent } from '@inlet/react-pixi'
export default PixiComponent('Rectangle', {
create: props => {
return new PIXI.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}
heigth={300}
fill={0xff0000} />
</Stage>
)
Consider this rotating bunny example:
./components/RotatingBunny.js
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.
- Using
AppConsumer
and pass the instance via render props:
App.js
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>
)
- Or use a Higher Order Component:
App.js
import { Stage, Container, withPixiApp } from '@inlet/react-pixi'
import { RotatingBunny } from './components/RotatingBunny'
const BunnyWithApp = withPixiApp(RotatingBunny)
export default () => (
<Stage>
<Container>
<BunnyWithApp />
</Container>
</Stage>
)
Renders Root Container of a PIXI.Application
.
Props:
-
width
the width of the renderers view, default800
-
height
the height of the renderers view, default600
-
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), defaulttrue
-
renderOnComponentChange
render stage on Stage changes? only useful in combination withraf
-
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.
Pass component options as props, example:
import { Sprite } from '@inlet/pixi-react'
const MyComponent = () => (
<Sprite image=".image.png" x={100} y={200} />
)
The image
prop here is a short-hand for PIXI.Sprite.fromImage()
:
import { Sprite } from '@inlet/pixi-react'
const texture = new PIXI.Sprite.fromImage('./image.png')
const MyComponent = () => (
<Sprite texture={texture} x={100} y={200} />
)
# 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