CodePen Home React PIXI - Sprite - Rotating Bunny - hooks style

RotatingBunny.tsx

// https://codepen.io/inlet/pen/aYLvrZ rewritten with hooks
import React, { useState } from "react";
import { Container, Sprite, Stage, useTick } from "@inlet/react-pixi";

const img = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/693612/IaUrttj.png";

const RotatingBunny: React.FC = () => {
  const [rotation, setRotation] = useState(0);
  useTick((delta) => delta && setRotation(rotation + 0.1 * delta));

  return <Sprite image={img} scale={4} rotation={rotation} anchor={0.5} />;
};

const stageOptions = { backgroundColor: 0x012b30 };

const App: React.FC = () => (
  <div>
    <h1>Demo</h1>

    <Stage width={500} height={500} options={stageOptions}>
      <Container x={250} y={250}>
        <RotatingBunny />
      </Container>
    </Stage>
  </div>
);

export default App;