Chore: update docs

.github/CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # How to contribute
 
-It is essential to the development of React Pixi that the community is empowered
+It is essential to the development of PixiJS React that the community is empowered
 to make changes and get them into the library. Here are some guidelines to make
 that process silky smooth for all involved.
 
@@ -13,7 +13,7 @@ version so that our users learn about the upcoming changes and migrate their cod
 ## Reporting issues
 
 To report a bug, request a feature, or even ask a question, make use of the GitHub Issues
-section for [React Pixi][issues]. When submitting an issue please take the following steps:
+section for [PixiJS React][issues]. When submitting an issue please take the following steps:
 
 1. **Search for existing issues.** Your question or bug may have already been answered or fixed,
    be sure to search the issues first before putting in a duplicate issue.
@@ -44,7 +44,7 @@ To setup for making changes you will need to take a few steps, we've outlined th
    for the [command line][fork-cli] and for the [GitHub Client][fork-gui].
 
 3. Next, run `npm install` from within your clone of your fork. That will install dependencies
-   necessary to build React Pixi.
+   necessary to build PixiJS React.
 
 4. Pixi React is set up as a monorepo, with separate packages for:
   - The main library - `packages/react`
@@ -67,7 +67,7 @@ Your change should be made directly to the branch in your fork, or to a branch i
 
 ### Testing Your Change
 
-You can test your change by using the automated tests packaged with React Pixi. You can run these tests by running `npm test`
+You can test your change by using the automated tests packaged with PixiJS React. You can run these tests by running `npm test`
 from the command line, either from the project root to test all packages or from within an individual package to test only
 that package. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions
 from sneaking in.
@@ -89,7 +89,7 @@ You can use the `docs` package as a way to test Pixi React features are working
 ### Submitting Your Change
 
 After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request
-from your fork to the main **React Pixi** repository on the branch you used in the `Making a Change` section of this document.
+from your fork to the main **PixiJS React** repository on the branch you used in the `Making a Change` section of this document.
 
 ## Quickie Code Style Guide
 

packages/docs/docs/about.mdx

@@ -5,147 +5,200 @@ sidebar_position: 1
 
 # About
 
-<p>
+<div style={{textAlign: 'center'}}>
+<div>
   <h1 align="center" hidden>
     Pixi React
   </h1>
   <img
-    src="/pixi-react/img/pixi-react-rainbow.png"
+    src="/pixi-react/img/pixi-react-logo.png"
     alt="pixi-react"
-    width="310"
+    width="400"
   />
-</p>
+</div>
 
-<p>
-  <strong>Simply the best way to write PIXI applications in React</strong>
+<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/">PIXI</a> applications using React
+    Write <a href="http://www.pixijs.com/">PixiJS</a> applications using React
     declarative style 👌
   </sub>
-</p>
+</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; [![CircleCI](https://img.shields.io/circleci/project/github/pixijs/pixi-react/master.svg)](https://circleci.com/gh/pixijs/pixi-react) &nbsp;&nbsp; ![license](https://img.shields.io/badge/license-MIT-green.svg) &nbsp;&nbsp; ![react](https://img.shields.io/badge/react-latest-ff69b4.svg) &nbsp;&nbsp; ![pixi](https://img.shields.io/badge/pixi-v6+-ff69b4.svg)
+![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)
 
-## News!
+</div>
 
-**We're delighted to announce Pixi React v7.0.0, the first major release since making it an official Pixi package!**
+## Features
 
-While all the core components remain the same, there have been some significant changes under the hood:
-
-* Full React 18 support including a new `createRoot` API, matching the signature of [React 18's `ReactDOM/client`](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis)
-* Full Pixi V7 support
-* New up-to-date [docs site](https://pixijs.io/pixi-react/)
-* Repository converted to a monorepo with separate [`@pixi/react`](https://www.npmjs.com/package/@pixi/react) and [`@pixi/animated`](https://www.npmjs.com/package/@pixi/react-animated) packages
-* Internally all `pixi.js` library imports were replaced with `@pixi/` scoped package versions, providing bundlesize improvements for users who use modular builds
-* Scoped imports allowed us to remove `@pixi/react-legacy` and `@pixi/react-animated-legacy` packages, with rendering deferred to a user's installed `pixi.js` package
-* `sideEffects: false` added to `package.json` to support tree-shaking
-
-We're excited to see what the community builds with the library and as ever please let us know on [GitHub](https://github.com/pixijs/pixi-react/issues) if you run into any issues, or reach out to us on the [Discord](https://discord.gg/zqbXQAADuM) to chat.
-
-Thanks!
-PixiJS Team
+- 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 [Create React App](https://github.com/facebook/create-react-app).
-To add to an existing React application, just install the dependencies:
+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:
 
-### Start New React Project "my-app" with Create React App:
 ```bash
-# for typescript add "--template typescript"
-npx create-react-app my-app
+# for typescript use "--template react-ts"
+npx create-vite@latest --template react my-app
 cd my-app
+npm install
 ```
 
-### Install Pixi React Dependencies:
+### 2. Install Pixi-React dependencies:
+
 ```bash
 npm install pixi.js @pixi/react
 ```
 
-## Usage:
+### 3. Replace App.jsx with the following:
+
 ```jsx
-import { BlurFilter } from 'pixi.js';
-import { Stage, Container, Sprite, Text } from '@pixi/react';
+import './App.css';
 import { useMemo } from 'react';
 
-export const MyComponent = () =>
-{
-  const blurFilter = useMemo(() => new BlurFilter(4), []);
+import { BlurFilter, TextStyle } from 'pixi.js';
+import { Stage, Container, Sprite, Text } from '@pixi/react';
 
+export const App = () => {
+  const blurFilter = useMemo(() => new BlurFilter(2), []);
+  const bunnyUrl = 'https://pixijs.io/pixi-react/img/bunny.png';
   return (
-    <Stage>
-      <Sprite
-        image="https://pixijs.io/pixi-react/img/bunny.png"
-        x={400}
-        y={270}
-        anchor={{ x: 0.5, y: 0.5 }}
-      />
-
-      <Container x={400} y={330}>
-        <Text text="Hello World" anchor={{ x: 0.5, y: 0.5 }} filters={[blurFilter]} />
+    <Stage x={800} y={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>
   );
 };
 ```
 
-[Codepen examples](https://codepen.io/collection/XPpGdb/)
+### 4. Run the app:
+
+```bash
+npm run dev
+```
+
+The final result should look like this:
+
+<div style={{ marginLeft: '50px' }}>
+  <img
+    src="/pixi-react/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
 
 ```jsx live noInline
-const reducer = (_, { data }) => data;
-
-const Bunny = () => {
-  const [motion, update] = useReducer(reducer);
-  const iter = useRef(0);
-
-  useTick((delta) => {
-    const i = (iter.current += 0.05 * delta);
-
-    update({
-      type: 'update',
-      data: {
-        x: Math.sin(i) * 100,
-        y: Math.sin(i / 1.5) * 100,
-        rotation: Math.sin(i) * Math.PI,
-        anchor: Math.sin(i / 2),
-      },
-    });
-  });
-
-  return <Sprite image="/pixi-react/img/bunny.png" {...motion} />;
+// import { Stage, Sprite, Container, Text } from '@pixi/react';
+// import { TextStyle, BlurFilter } from 'pixi.js';
+// import { useMemo } from 'react';
+// import { render } from 'react-dom';
+
+const App = () => {
+  const blurFilter = useMemo(() => new BlurFilter(2), []);
+  const bunnyUrl = 'https://pixijs.io/pixi-react/img/bunny.png';
+  return (
+    <Stage x={800} y={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>
+  );
 };
-
-render(
-  <Stage width={300} height={300} options={{ backgroundAlpha: 0 }}>
-    <Container x={150} y={150}>
-      <Bunny />
-    </Container>
-  </Stage>,
-);
+render(<App />);
 ```
 
 ## Components
 
-Pass PIXI properties directly as component props, example:
+Pass PixiJS properties directly as component props, example:
 
 ```jsx
-import { Sprite } from '@pixi/react'
+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={PIXI.BLEND_MODES.ADD}
+    blendMode={BLEND_MODES.ADD}
     roundPixels={true}
-    filters={[blurFilter, matrixFilter]}
+    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

packages/docs/docs/components/AnimatedSprite.mdx

@@ -2,7 +2,7 @@
 
 ## Props
 
-https://pixijs.download/dev/docs/PIXI.AnimatedSprite.html
+https://pixijs.download/v7.x/docs/PIXI.AnimatedSprite.html
 
 ### Additional Props
 
@@ -16,6 +16,9 @@ https://pixijs.download/dev/docs/PIXI.AnimatedSprite.html
 ## Usage
 
 ```jsx live noInline
+// import { render } from 'react-dom';
+// import { Stage, Container, AnimatedSprite } from '@pixi/react';
+
 const textures = makeAnimatedSpriteTextures();
 
 render(

packages/docs/docs/components/BitmapText.mdx

@@ -2,11 +2,14 @@
 
 ## Props
 
-https://pixijs.download/dev/docs/PIXI.BitmapText.html
+https://pixijs.download/v7.x/docs/PIXI.BitmapText.html
 
 ## Usage
 
 ```jsx live noInline
+// import { render } from 'react-dom';
+// import { Stage, BitmapText, Text } from '@pixi/react';
+
 const position = {
   anchor: 0.5,
   x: 250,
@@ -45,11 +48,19 @@ 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'
 
-PIXI.Loader.shared
+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 }}>

packages/docs/docs/components/Container.mdx

@@ -2,11 +2,14 @@
 
 ## Props
 
-https://pixijs.download/dev/docs/PIXI.Container.html
+https://pixijs.download/v7.x/docs/PIXI.Container.html
 
 ## Usage
 
 ```jsx live
+// import React from 'react'
+// import { Stage, Container, Sprite } from '@pixi/react';
+
 <Stage width={300} height={300} options={{ backgroundColor: 0xeef1f5 }}>
   <Container position={[150, 150]}>
     <Sprite anchor={0.5} x={-75} y={-75} image="/pixi-react/img/bunny.png" />