pixi-react

Update modules to latest (incl. React v17.0.1)

React 17 compatible 🎉

As you might have noticed, React 17 just landed with quite some improvements. Hooray, this means that I had to implement new methods to the reconciler as well. I'm happy to inform you that ReactPixi is now fully compatible with React 17.

NOTE: This release is not compatible with React 16.x or older. If you need to stick to React 16.x make sure to use ReactPixi v5.x.

Added

Support for pixi legacy without having to create aliases in your project 🎉

npm install pixi.js-legacy

import { Stage } from '@inlet/react-pixi/legacy';

<Stage options={{ forceCanvas: true }}>... </Canvas>

Improved

Now the devtools will be injected once, this prevents warning errors or duplicate injections.

Fixed

Make prop { options: { resizeTo } } for <Stage> optional.

Fixed

Typings for animated components

React Spring

🎉 Use React-Pixi with React Spring is now available through import @inlet/react-pixi/animated,
see https://reactpixi.org/react-spring

Compatible with react-spring@next (v9+). Note that older versions of react-spring don't work as they have a different API.

Removed

• fbjs dependency
• idx dependency

Added

• Typings for animated
• Docs regarding react-spring
• Use invariant as util
• Npm sub package for animated.

Improved

• Only auto test and build on prepack

CDN Links

React-Pixi:
https://unpkg.com/@inlet/[email protected]/dist/react-pixi.umd.js

React-Pixi with React-Spring support:
https://unpkg.com/@inlet/[email protected]/animated/react-pixi.umd.js

Fixed

Instead of resetting the interaction manager, simply update the resolution of the interaction manager. Libraries like pixi-viewport depends on the interaction manager, this patch will fix any related issues.

Fixed

Ref's in custom components (PixiComponent):

import { Graphics } from 'pixi.js';

interface RectangleProps {
  x: number;
  y: number;
  color: number;
}

const Rectangle = PixiComponent<RectangleProps, Graphics>('Rectangle', {
  create: () => new Graphics(),
  applyProps: (ins, _, props) => {
    ins.x = props.x;
    ins.y = props.y;
    ins.beginFill(props.color);
    ins.drawRect(0, 0, 100, 100);
    ins.endFill();
  },
});

const App = () => (
  <Rectangle 
    ref={rect => console.assert(rect instanceof Graphics)}
    x={100} 
    y={100} 
    color={0xff0000} 
  />
);

Fixes

AutoDensity is now set to PIXI.Application allowing app.renderer.resize to set width, height and css styles correctly.

Fixed

Change the applyDefaultProps behaviour, fixes #235

Prop is not undefined?
   Set direct PIXI value

Prop has a default value?
  Set value to default

Else?
  Show a warn log

New major release 🎉

Now compatible with PIXI v5.3+.

Improved

Supports multiple renderer contexts

Fixed

• Inject fiber into devtools

Added

• Update renderer resolution on options.resolution change
• Auto resolution, move browser across screens with diff resolutions auto updates the renderer resolution

Added

Support for updating the PIXI stage on React component change 🙌

See https://reactpixi.org/stage/#custom-stage-updates

Fixed

• Typings for PointLike supporting { x: number, y: number }

Improved

• Graphics draw prop.

  Breaking change

  The draw prop now accepts a function to redraw that is part of the
  React eco-system, see https://reactpixi.org/components/graphics#usage

Removed

• Graphics preventDefault prop.

  Breaking change

v2.0.0 🎉

• Uses latest react-reconciler
• Upgrade docz and internals
• Update configs
• Remove lodash and use lodash submodules instead

Improved

The type definition wrapping Container works better.

Fixed

Types for Graphics, and all Components have children props now