add v7 content

docs/docs/about.jsx

@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react';
+import { Container, Sprite, Stage, Text } from '@pixi/react';
+import { BlurFilter, TextStyle } from 'pixi.js';
+
+export default function App() {
+    const blurFilter = useMemo(() => new BlurFilter(2), []);
+    const bunnyUrl = 'https://pixijs.io/pixi-react/img/bunny.png';
+    return (
+        <Stage width={800} height={600} options={{ background: 0x1099bb }}>
+            <Sprite image={bunnyUrl} x={300} y={150} />
+            <Sprite image={bunnyUrl} x={500} y={150} />
+            <Sprite image={bunnyUrl} x={400} y={200} />
+
+            <Container x={200} y={200}>
+                <Text
+                    text='Hello World'
+                    anchor={0.5}
+                    x={220}
+                    y={150}
+                    filters={[blurFilter]}
+                    style={
+                        new TextStyle({
+                            align: 'center',
+                            fill: '0xffffff',
+                            fontSize: 50,
+                            letterSpacing: 20,
+                            dropShadow: true,
+                            dropShadowColor: '#E72264',
+                            dropShadowDistance: 6,
+                        })
+                    }
+                />
+            </Container>
+        </Stage>
+    );
+}

docs/docs/about.mdx

@@ -0,0 +1,172 @@
+---
+slug: /about
+sidebar_position: 1
+---
+import { EmbeddedEditor } from "@site/src/components/Editor/EmbeddedEditor";
+import IndexFile from '!!raw-loader!./about';
+
+# About
+
+<div style={{textAlign: 'center'}}>
+<div>
+  <h1 align="center" hidden>
+    Pixi React
+  </h1>
+  <img
+    src="/pixi-react/v7/img/pixi-react-logo.png"
+    alt="pixi-react"
+    width="400"
+  />
+</div>
+
+<div style={{ marginTop: '-10px' }}>
+  <strong>Simply the best way to write PixiJS applications in React</strong>
+  <br />
+  <sub>
+    Write <a href="http://www.pixijs.com/">PixiJS</a> applications using React
+    declarative style 👌
+  </sub>
+</div>
+
+![release](https://img.shields.io/github/v/release/pixijs/pixi-react) &nbsp;&nbsp; ![downloads](https://img.shields.io/npm/dm/@pixi/react) &nbsp;&nbsp; ![pixi](https://img.shields.io/badge/pixi-v6/v7-E72264.svg)
+
+</div>
+
+## Features
+
+- React 17 and 18 support
+- PixiJS v6 and v7 support
+- `react-spring` compatible animated components
+
+## Quick start
+
+If you want to start a new React project from scratch, we recommend [Vite](https://vitejs.dev/guide/).
+To add to an existing React application, just install the dependencies.
+
+### 1. Create a new React project with Vite:
+
+```bash
+# for typescript use "--template react-ts"
+npx create-vite@latest --template react my-app
+cd my-app
+npm install
+```
+
+### 2. Install Pixi-React dependencies:
+
+```bash
+npm install pixi.js@7 @pixi/react@7
+```
+
+### 3. Replace App.jsx with the following:
+
+```jsx
+import './App.css';
+import { useMemo } from 'react';
+
+import { BlurFilter, TextStyle } from 'pixi.js';
+import { Stage, Container, Sprite, Text } from '@pixi/react';
+
+const App = () => {
+  const blurFilter = useMemo(() => new BlurFilter(2), []);
+  const bunnyUrl = 'https://pixijs.io/pixi-react/v7/img/bunny.png';
+  return (
+    <Stage width={800} height={600} options={{ background: 0x1099bb }}>
+      <Sprite image={bunnyUrl} x={300} y={150} />
+      <Sprite image={bunnyUrl} x={500} y={150} />
+      <Sprite image={bunnyUrl} x={400} y={200} />
+
+      <Container x={200} y={200}>
+        <Text
+          text="Hello World"
+          anchor={0.5}
+          x={220}
+          y={150}
+          filters={[blurFilter]}
+          style={
+            new TextStyle({
+              align: 'center',
+              fill: '0xffffff',
+              fontSize: 50,
+              letterSpacing: 20,
+              dropShadow: true,
+              dropShadowColor: '#E72264',
+              dropShadowDistance: 6,
+            })
+          }
+        />
+      </Container>
+    </Stage>
+  );
+};
+
+export default App;
+```
+
+### 4. Run the app:
+
+```bash
+npm run dev
+```
+
+The final result should look like this:
+
+<div style={{ marginLeft: '50px' }}>
+  <img
+    src="/pixi-react/v7/img/pixi-react-example.png"
+    alt="Screenshot of the quick start 'my-app' project"
+    width="500"
+  />
+</div>
+
+<div style={{ paddingTop: '20px' }} />
+
+See the [Codepen examples](https://codepen.io/collection/XPpGdb/)
+
+## Example
+
+<EmbeddedEditor files={{"App.js": IndexFile}} />
+
+## Components
+
+Pass PixiJS properties directly as component props, example:
+
+```jsx
+import { Sprite } from '@pixi/react';
+import { BLEND_MODES, BlurFilter } from 'pixi.js';
+import { useMemo } from 'react';
+
+const MyComponent = () => (
+  const blurFilter = useMemo(() => new BlurFilter(4), []);
+
+  <Sprite
+    texture={myTexture}
+    anchor={0.5}
+    position={[100, 200]}
+    blendMode={BLEND_MODES.ADD}
+    roundPixels={true}
+    filters={[blurFilter]}
+  />;
+);
+```
+
+## FAQ
+
+<details>
+  <summary>Interaction does not work</summary>
+  <div>
+
+  If you are using PixiJS without the `pixi.js` package and are instead using scoped packages like `@pixi/app`, `@pixi/sprite` etc, you will need to import the `@pixi/events` package to enable interaction.
+
+  ```js
+  import '@pixi/events';
+  ```
+  </div>
+</details>
+
+## Join us
+
+You're missing an amazing feature? Or just want to get in touch with fellow developers
+and have a chat? Feel free to join our Discord channel.
+
+[Join us on Discord](https://discord.gg/zqbXQAADuM)

docs/docs/components/AnimatedSprite.mdx

@@ -0,0 +1,35 @@
+import { EmbeddedEditor } from "@site/src/components/Editor/EmbeddedEditor";
+import IndexFile from '!!raw-loader!./AnimatedSprite/index';
+import makeAnimatedSpriteTexturesFile from '!!raw-loader!./AnimatedSprite/makeAnimatedSpriteTextures';
+
+# AnimatedSprite
+
+
+## Props
+
+https://pixijs.download/v7.x/docs/PIXI.AnimatedSprite.html
+
+### Additional Props
+
+| Prop                   | Default Value | Description                                           |
+| ---------------------- | ------------- | ----------------------------------------------------- |
+| textures `array`       |               | Generate the animated sprite from the textures        |
+| images `array`         |               | Generate the animated sprite directly from the images |
+| isPlaying `boolean`    | true          | whether the animation starts automatically            |
+| initialFrame `integer` | 0             | Which frame the animation starts from                 |
+
+## Usage
+
+<EmbeddedEditor files={{"App.js": IndexFile, "makeAnimatedSpriteTextures.js": makeAnimatedSpriteTexturesFile}} />
+
+## Example
+
+<iframe
+  height={500}
+  scrolling="no"
+  title="Rope"
+  src="//codepen.io/inlet/embed/ewdXEY/?height=300&theme-id=33987&default-tab=result&embed-version=2"
+  frameBorder="no"
+  allowFullScreen={true}
+  style={{ width: '100%' }}
+/>

docs/docs/components/AnimatedSprite/index.jsx

@@ -0,0 +1,20 @@
+import { Stage, Container, AnimatedSprite } from '@pixi/react';
+import makeAnimatedSpriteTextures from './makeAnimatedSpriteTextures';
+
+const textures = makeAnimatedSpriteTextures();
+
+export default function App() {
+    return (
+        <Stage width={300} height={300} options={{ backgroundColor: 0xeef1f5 }}>
+            <Container position={[150, 150]}>
+                <AnimatedSprite
+                    anchor={0.5}
+                    textures={textures}
+                    isPlaying={true}
+                    initialFrame={0}
+                    animationSpeed={0.1}
+                />
+            </Container>
+        </Stage>
+    );
+}

docs/docs/components/AnimatedSprite/makeAnimatedSpriteTextures.js

@@ -0,0 +1,36 @@
+import * as PIXI from 'pixi.js';
+
+export default function makeAnimatedSpriteTextures()
+{
+    const textures = [];
+
+    if (typeof window !== 'undefined')
+    {
+        for (let i = 1; i <= 10; i++)
+        {
+            const style = new PIXI.TextStyle({
+                fontFamily: 'Arial',
+                fontSize: 36,
+                fontStyle: 'italic',
+                fontWeight: 'bold',
+                fill: ['#ffffff', '#00ff99'], // gradient
+                stroke: '#4a1850',
+                strokeThickness: 5,
+                dropShadow: true,
+                dropShadowColor: '#000000',
+                dropShadowBlur: 4,
+                dropShadowAngle: Math.PI / 6,
+                dropShadowDistance: 6,
+                wordWrap: true,
+                wordWrapWidth: 440,
+            });
+            const text = new PIXI.Text(i.toString(), style);
+
+            text.width = 60;
+            text.height = 50;
+            textures.push(new PIXI.Texture(text.texture));
+        }
+    }
+
+    return textures;
+}

docs/docs/components/BitmapText.jsx

@@ -0,0 +1,21 @@
+import { BitmapText, Stage, Text } from '@pixi/react';
+import ExampleAssetLoader from './ExampleAssetLoader';
+
+const position = {
+    anchor: 0.5,
+    x: 250,
+    y: 150,
+};
+export default function App() {
+    return (
+        <Stage width={500} height={300} options={{ backgroundColor: 0xffffff }}>
+            <ExampleAssetLoader
+                name='desyrel'
+                url='https://pixijs.io/pixi-react/font/desyrel.xml'
+                loader={<Text {...position} text='⌛ Loading font...' style={{ fontFamily: 'Arial', fontSize: 15 }} />}
+            >
+                <BitmapText {...position} text='Hello World!' style={{ fontName: 'Desyrel', fontSize: 50 }} />
+            </ExampleAssetLoader>
+        </Stage>
+    );
+}

docs/docs/components/BitmapText.mdx

@@ -0,0 +1,46 @@
+import { EmbeddedEditor } from '@site/src/components/Editor/EmbeddedEditor';
+import IndexFile from '!!raw-loader!./BitmapText';
+import ExampleAssetLoaderFile from '!!raw-loader!./ExampleAssetLoader';
+
+# BitmapText
+
+## Props
+
+https://pixijs.download/v7.x/docs/PIXI.BitmapText.html
+
+## Usage
+
+<EmbeddedEditor height={350} files={{ 'App.js': IndexFile, 'ExampleAssetLoader.js': ExampleAssetLoaderFile }} />
+
+## Example
+
+Make sure to load the bitmap font data before mounting.
+
+See https://pixijs.io/examples/#/demos/text-demo.js
+
+```js
+import { render } from 'react-dom'
+import { Stage, BitmapText } from '@pixi/react'
+import { Loader } from 'pixi.js'
+
+Loader.shared
+  .add('desyrel', './assets/desyrel.xml')
+  .load(onAssetsLoaded)
+
+// If using v7 or later, use the following code:
+// import { Assets } from 'pixi.js'
+//
+// Assets
+//  .load('./assets/desyrel.xml')
+//  .then(onAssetsLoaded)
+
+const App = () => (
+  <Stage>
+    <BitmapText text="Hello World" style={{ fontName: 'Desyrel', fontSize: 35 }}>
+  </Stage>
+)
+
+function onAssetsLoaded() {
+  render(<App />, document.getElementById('root'))
+}
+```

docs/docs/components/Container.jsx

@@ -0,0 +1,14 @@
+import { Container, Stage, Sprite } from '@pixi/react';
+
+export default function App() {
+    const url = 'https://pixijs.io/pixi-react/img/bunny.png';
+    return (
+        <Stage width={300} height={300} options={{ backgroundColor: 0xeef1f5 }}>
+            <Container position={[150, 150]}>
+                <Sprite anchor={0.5} x={-75} y={-75} image={url} />
+                <Sprite anchor={0.5} x={0} y={0} image={url} />
+                <Sprite anchor={0.5} x={75} y={75} image={url} />
+            </Container>
+        </Stage>
+    );
+}