Write PIXI 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 { 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)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:
- Container
- ParticleContainer
- Sprite
- TilingSprite
- Graphics
- SimpleMesh
- SimpleRope
- Text
- BitmapText
- NineSlicePlane
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>
)Props helper
ReactPixi comes with a handy utility method applyDefaultProps that can help you applying
props directly to a PIXI primitive instance handling events, PIXI props and point-like values.
Here's an example to pass through every other DisplayObject props and handle prop count separately:
import { Text } from 'pixi.js'
import { Stage, applyDefaultProps, PixiComponent } from '@inlet/react-pixi'
export default PixiComponent('Counter', {
create: ({ count }) => {
return new Text(count.toString())
},
applyProps: (instance, oldProps, newProps) => {
const { count, ...oldP } = oldProps
const { count, ...newP } = newProps
// apply rest props to PIXI.Text
applyDefaultProps(instance, oldP, newP)
// set new count
instance.text = count.toString()
}
});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.
- Using
AppConsumerand 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>
)- 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>
)- Use hooks API in Functional Components
RotatingBunny.jsx
import { useApp } from '@inlet/react-pixi'
function RotatingBunny(props) {
const app = useApp()
// app => PIXI.Application
return (
...
)
}Renders Root Container of a PIXI.Application.
Props:
widththe width of the renderers view, default800heightthe height of the renderers view, default600onMounta callback function for the created app instanceonUnMounta callback function when the Stage gets unmountedrafuse the internal PIXI ticker (requestAnimationFrame) to render the stage, defaulttruerenderOnComponentChangerender stage when the Stage component updates. This is ignored ifrafistrue.optionssee 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/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} /># 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:watchIf this project help you reduce time to develop, you can buy me a cup of coffee.
🙏 Thanks!