Skip to content

Commit b85a7af

Browse files
authored
Various Documentation fixes (#496)
* Various fixes - Manually specify v7 in install command - Stage takes a `width` and `height`, not an `x` and `y` - Updated Quick start App component to correctly default export * Updated README to use Vite This is to make it consistent with the docs
1 parent 843be67 commit b85a7af

File tree

2 files changed

+11
-9
lines changed

2 files changed

+11
-9
lines changed

packages/docs/docs/about.mdx

+6-4
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ npm install
5353
### 2. Install Pixi-React dependencies:
5454

5555
```bash
56-
npm install pixi.js @pixi/react
56+
npm install pixi.js@7 @pixi/react@7
5757
```
5858

5959
### 3. Replace App.jsx with the following:
@@ -65,11 +65,11 @@ import { useMemo } from 'react';
6565
import { BlurFilter, TextStyle } from 'pixi.js';
6666
import { Stage, Container, Sprite, Text } from '@pixi/react';
6767

68-
export const App = () => {
68+
const App = () => {
6969
const blurFilter = useMemo(() => new BlurFilter(2), []);
7070
const bunnyUrl = 'https://pixijs.io/pixi-react/img/bunny.png';
7171
return (
72-
<Stage x={800} y={600} options={{ background: 0x1099bb }}>
72+
<Stage width={800} height={600} options={{ background: 0x1099bb }}>
7373
<Sprite image={bunnyUrl} x={300} y={150} />
7474
<Sprite image={bunnyUrl} x={500} y={150} />
7575
<Sprite image={bunnyUrl} x={400} y={200} />
@@ -97,6 +97,8 @@ export const App = () => {
9797
</Stage>
9898
);
9999
};
100+
101+
export default App;
100102
```
101103

102104
### 4. Run the app:
@@ -131,7 +133,7 @@ const App = () => {
131133
const blurFilter = useMemo(() => new BlurFilter(2), []);
132134
const bunnyUrl = 'https://pixijs.io/pixi-react/img/bunny.png';
133135
return (
134-
<Stage x={800} y={600} options={{ background: 0x1099bb }}>
136+
<Stage width={800} height={600} options={{ background: 0x1099bb }}>
135137
<Sprite image={bunnyUrl} x={300} y={150} />
136138
<Sprite image={bunnyUrl} x={500} y={150} />
137139
<Sprite image={bunnyUrl} x={400} y={200} />

packages/react/README.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -37,19 +37,19 @@ Pixi React is an open-source, production-ready library to render high performant
3737

3838
### Quick start
3939

40-
If you want to start a new React project from scratch, we recommend [Create React App](https://github.com/facebook/create-react-app).
40+
If you want to start a new React project from scratch, we recommend [Vite](https://vitejs.dev/).
4141
To add to an existing React application, just install the dependencies:
4242

43-
#### Start New React Project "my-app" with Create React App:
43+
#### Start New React Project "my-app" with Create React Vite:
4444
```bash
45-
# for typescript add "--template typescript"
46-
npx create-react-app my-app
45+
# for typescript use "--template react-ts"
46+
npx create-vite@latest --template react my-app
4747
cd my-app
4848
```
4949

5050
#### Install Pixi React Dependencies:
5151
```bash
52-
npm install pixi.js @pixi/react
52+
npm install pixi.js@7 @pixi/react@7
5353
```
5454

5555
#### Usage:

0 commit comments

Comments
 (0)