Skip to content

Commit

Permalink
Various Documentation fixes (#496)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
ERmilburn02 committed Jul 12, 2024
1 parent 843be67 commit b85a7af
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 9 deletions.
10 changes: 6 additions & 4 deletions packages/docs/docs/about.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ npm install
### 2. Install Pixi-React dependencies:

```bash
npm install pixi.js @pixi/react
npm install pixi.js@7 @pixi/react@7
```

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

export const App = () => {
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 }}>
<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} />
Expand Down Expand Up @@ -97,6 +97,8 @@ export const App = () => {
</Stage>
);
};

export default App;
```

### 4. Run the app:
Expand Down Expand Up @@ -131,7 +133,7 @@ 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 }}>
<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} />
Expand Down
10 changes: 5 additions & 5 deletions packages/react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,19 +37,19 @@ Pixi React is an open-source, production-ready library to render high performant

### 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).
If you want to start a new React project from scratch, we recommend [Vite](https://vitejs.dev/).
To add to an existing React application, just install the dependencies:

#### Start New React Project "my-app" with Create React App:
#### Start New React Project "my-app" with Create React Vite:
```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
```

#### Install Pixi React Dependencies:
```bash
npm install pixi.js @pixi/react
npm install pixi.js@7 @pixi/react@7
```

#### Usage:
Expand Down

0 comments on commit b85a7af

Please sign in to comment.