doc: major updates to Pixi React site

.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 Pixi 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 [pixi-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.
@@ -35,21 +35,22 @@ section for [React Pixi][issues]. When submitting an issue please take the follo
 
 To setup for making changes you will need to take a few steps, we've outlined them below:
 
-1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because
-   pixi uses modern JS features, you will need a modern version of node. We recommend using the version defined in our
-   [`.nvmrc`][nvmrc] file, which is generally the latest LTS version. You can also use [`nvm`][nvm] to manage multiple
-   versions of node installed on your development machine.
+1. Ensure you have node.js installed. We recommend that you install using [`nvm`][nvm]; alternatively you **can**
+   download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version
+   of node. We recommend using the version defined in our [`.nvmrc`][nvmrc] file, which is generally the latest
+   LTS version.  Currently (Jan 2024) the build is known to work with node v16 and v18; ***t**h**ere are reports of
+   issues using v20***.
 
 2. Fork the **[pixi-react][pixi-react]** repository, if you are unsure how to do this GitHub has a guides
    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 Pixi-React.
 
 4. Pixi React is set up as a monorepo, with separate packages for:
   - The main library - `packages/react`
   - The "animated" library, for working with `react-spring` - `packages/animated`
-  - Their "legacy" counterparts for compatibility with `pixi.js-legacy` - `packages/react-legacy` and `packages/animated-legacy`
+  - Their "legacy" counterparts for compatibility with `pixi.js-legacy` - `packages/react-**legacy**` and `packages/animated-legacy`
   - The sourcecode for the docs website, built with docusaurus - `packages/docs`
 
 ### Making a Change
@@ -89,7 +90,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 **Pixi 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,7 +5,7 @@ sidebar_position: 1
 
 # About
 
-<p>
+<div>
   <h1 align="center" hidden>
     Pixi React
   </h1>
@@ -14,16 +14,16 @@ sidebar_position: 1
     alt="pixi-react"
     width="310"
   />
-</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)
 
@@ -48,49 +48,86 @@ PixiJS Team
 
 ## 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(4), []);
+  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}>
+      <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',
+              fontSize: 50,
+              stroke: '#01d27e',
+              strokeThickness: 5,
+              letterSpacing: 20,
+              dropShadow: true,
+              dropShadowColor: '#ccced2',
+              dropShadowDistance: 6,
+            })
+          }
+        />
       </Container>
     </Stage>
   );
-};
+}
 ```
 
-[Codepen examples](https://codepen.io/collection/XPpGdb/)
+### 4. Run the app:
+
+```bash
+npm run dev
+```
+
+<div style={{ marginLeft: '50px' }}>
+  <img
+    src="/pixi-react/img/quick-start-my-app.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
 
@@ -129,19 +166,24 @@ render(
 
 ## Components
 
-Pass PIXI properties directly as component props, example:
+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={PIXI.BLEND_MODES.ADD}
+    blendMode={BLEND_MODES.ADD}
     roundPixels={true}
-    filters={[blurFilter, matrixFilter]}
+    filters={[blurFilter]}
   />;
 );
 ```

packages/docs/docs/components/BitmapText.mdx

@@ -45,8 +45,9 @@ 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)
 

packages/docs/docs/components/SimpleMesh.mdx

@@ -7,6 +7,8 @@ https://pixijs.download/dev/docs/PIXI.SimpleMesh.html
 ## Usage
 
 ```jsx live noInline
+// import {DRAW_MODES} from 'pixi.js';
+
 const { uvs, vertices, indices } = makeSimpleMeshData();
 
 render(
@@ -16,7 +18,7 @@ render(
       uvs={uvs}
       vertices={vertices}
       indices={indices}
-      drawMode={PIXI.DRAW_MODES.TRIANGLES}
+      drawMode={DRAW_MODES.TRIANGLES}
     />
   </Stage>,
 );

packages/docs/docs/components/SimpleRope.mdx

@@ -7,14 +7,16 @@ https://pixijs.download/dev/docs/PIXI.SimpleRope.html
 ## Usage
 
 ```jsx live
+// import {Point} from 'pixi.js';
+
 <Stage width={500} height={300} options={{ backgroundColor: 0xeef1f5 }}>
   <SimpleRope
     points={[
-      new PIXI.Point(0, 150),
-      new PIXI.Point(100, 100),
-      new PIXI.Point(150, 150),
-      new PIXI.Point(200, 100),
-      new PIXI.Point(400, 150),
+      new Point(0, 150),
+      new Point(100, 100),
+      new Point(150, 150),
+      new Point(200, 100),
+      new Point(400, 150),
     ]}
     image={'/pixi-react/img/snake.png'}
   />

packages/docs/docs/components/Text.mdx

@@ -19,14 +19,16 @@ Note: isSprite establishes how the Text is rendered during its whole lifecycle a
 ## Usage
 
 ```jsx live
+// import {TextStyle} from 'pixi.js';
+
 <Stage width={300} height={300} options={{ backgroundColor: 0xeef1f5 }}>
   <Text
     text="Hello World"
     anchor={0.5}
     x={150}
     y={150}
     style={
-      new PIXI.TextStyle({
+      new TextStyle({
         align: 'center',
         fontFamily: '"Source Sans Pro", Helvetica, sans-serif',
         fontSize: 50,

packages/docs/docs/custom-component.mdx

@@ -70,8 +70,12 @@ In most cases you can use simple React compositions. A rule of thumb is to use c
 Example, don't do:
 
 ```jsx
+import {Sprite} from 'pixi.js';
+
+...
+
 PixiComponent('Rectangle', {
-  create: () => new PIXI.Sprite(),
+  create: () => new Sprite(),
   applyProps: () => {...}
 });
 ```

packages/docs/docs/hoc/with-filters.mdx

@@ -5,9 +5,10 @@ Wrap your ReactPixi component with `withFilters` to control filter params via pr
 ```jsx
 import { AdjustmentFilter } from '@pixi/filter-adjustment';
 import { Container } from '@pixi/react';
+import { filters } from 'pixi.js';
 
 const Filters = withFilters(Container, {
-  blur: PIXI.filters.BlurFilter,
+  blur: filters.BlurFilter,
   adjust: AdjustmentFilter,
 });
 
@@ -26,9 +27,10 @@ For filters that expose methods, you can use the `apply` prop that is called wit
 
 ```jsx
 import { Container } from '@pixi/react';
+import { filter } from 'pixi.js';
 
 const Filters = withFilters(Container, {
-  matrix: PIXI.filters.ColorMatrixFilter,
+  matrix: filters.ColorMatrixFilter,
 });
 
 const App = () => (

packages/docs/docs/react-spring.mdx

@@ -41,7 +41,7 @@ const Box = (props) => (
   <Spring native to={props} config={config.spring}>
     {(props) => (
       <ReactPixiAnimated.Sprite
-        texture={PIXI.Texture.WHITE}
+        texture={Texture.WHITE}
         tint={0xaddb67}
         anchor={0.5}
         {...props}

packages/docs/docs/render/Render.mdx

@@ -1,6 +1,6 @@
 # Render
 
-You can either render your PIXI React components in the DOM or through a custom render call.
+You can either render your Pixi React components in the DOM or through a custom render call.
 
 ## In ReactDOM