[[[https://codepen.io/inlet/pen/2b7da2053276c634928a7eca450648c8]]]

html,
body {
  height: 100vh;
  background: #1d2330;
}

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

canvas {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

console.clear();

const {
  Stage,
  Container,
  AnimatedSprite,
  useApp,
  useTick
} = ReactPixi;

const [width, height] = [500, 500];
const spritesheet =
  "https://pixijs.io/examples/examples/assets/spritesheet/fighter.json";

const JetFighter = () => {
  const [frames, setFrames] = React.useState([]);
  const [rot, setRot] = React.useState(0);
  const app = useApp();

  useTick(delta => setRot(r => r + (0.01 * delta)));

  // load
  React.useEffect(() => {
    app.loader.add(spritesheet).load((_, resource) => {
      setFrames(
        Object.keys(resource[spritesheet].data.frames).map(frame =>
          PIXI.Texture.from(frame)
        )
      );
    });
  }, []);

  if (frames.length === 0) {
    return null;
  }

  return (
    <Container rotation={rot} x={width / 2} y={height / 2}>
      <AnimatedSprite
        animationSpeed={0.5}
        isPlaying={true}
        textures={frames}
        anchor={0.5}
      />
    </Container>
  );
};

const App = () => (
  <Stage width={width} height={height} options={{ autoDensity:true }}>
    <JetFighter />
  </Stage>
);

ReactDOM.render(<App />, document.getElementById("root"));