Skip to content

Commit 1d698f8

Browse files
trezytrezy
committed
docs: convert basic code samples to MArkdown code blocks
1 parent 25ac913 commit 1d698f8

File tree

23 files changed

+229
-349
lines changed

23 files changed

+229
-349
lines changed

‎docs/docs/components/application.mdx

+21-14
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,17 @@ sidebar_position: 1
33
title: Application
44
---
55

6-
import { EmbeddedEditor } from '@site/src/components/Editor/EmbeddedEditor';
7-
import ExampleAppBasic from '!!raw-loader!../../src/examples/application-basic/App';
8-
import ExampleAppResizeTo from '!!raw-loader!../../src/examples/application-resizeTo/App';
9-
106
The `<Application>` component is used to wrap your `@pixi/react` app. The `<Application>` component can take [all props that can be set][pixi-ApplicationOptions] on [`PIXI.Application`][pixi-Application].
117

128
## Example Usage
139

14-
<EmbeddedEditor
15-
files={{
16-
'App.js': ExampleAppBasic,
17-
}}
18-
viewType={'editor'}
19-
width={'100%'} />
10+
```jsx
11+
import { Application } from '@pixi/react';
12+
13+
const MyComponent = () => (
14+
<Application autoStart sharedTicker />
15+
);
16+
```
2017

2118
## Props
2219

@@ -35,10 +32,20 @@ The `<Application>` component is used to wrap your `@pixi/react` app. The `<Appl
3532

3633
The `<Application>` component supports the `resizeTo` property, with some additional functionality: it can accept any HTML element **or** it can take a React `ref` directly.
3734

38-
<EmbeddedEditor
39-
files={{ 'App.js': ExampleAppResizeTo }}
40-
viewType={'editor'}
41-
width={'100%'} />
35+
```jsx
36+
import { Application } from '@pixi/react';
37+
import { useRef } from 'react';
38+
39+
const MyComponent = () => {
40+
const parentRef = useRef(null);
41+
42+
return (
43+
<div ref={parentRef}>
44+
<Application resizeTo={parentRef} />
45+
</div>
46+
);
47+
};
48+
```
4249

4350
[pixi-Application]: https://pixijs.download/release/docs/app.Application.html
4451
[pixi-ApplicationOptions]: https://pixijs.download/release/docs/app.ApplicationOptions.html

‎docs/docs/components/custom-components.mdx

+17-7
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,25 @@ sidebar_position: 3
33
title: Custom Components
44
---
55

6-
import { EmbeddedEditor } from '@site/src/components/Editor/EmbeddedEditor';
7-
import ExampleApp from '!!raw-loader!../../src/examples/custom-components/App';
8-
96
Custom components are supported via the `extend` API. For example, you can create a `<viewport>` component using the [`pixi-viewport`][pixi-viewport] library:
107

11-
<EmbeddedEditor
12-
files={{ 'App.js': ExampleApp }}
13-
viewType={'editor'}
14-
width={'100%'} />
8+
```jsx
9+
import {
10+
Application,
11+
extend,
12+
} from '@pixi/react';
13+
import { Viewport } from 'pixi-viewport';
14+
15+
extend({ Viewport });
16+
17+
const MyComponent = () => (
18+
<Application>
19+
<pixiViewport>
20+
<pixiContainer />
21+
</pixiViewport>
22+
</Application>
23+
);
24+
```
1525

1626
The `extend` API will teach `@pixi/react` about your components, but TypeScript won't know about them nor their props. If you're using Typescript, check out our [docs for Typescript Users][typescript].
1727

‎docs/docs/components/pixi-components.mdx

+8-7
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@ sidebar_position: 2
33
title: Pixi.js Components
44
---
55

6-
import { EmbeddedEditor } from '@site/src/components/Editor/EmbeddedEditor';
7-
import ExampleAppGraphics from '!!raw-loader!../../src/examples/pixi-components-graphics/App';
8-
96
All Pixi.js classes should be available as components. They should also be included in your IDE's intellisense/autocomplete once you've installed/imported `@pixi/react`. So long as it's exported from Pixi.js, it's supported as a component with the `pixi` prefix. Here's a selection of commonly used components:
107

118
```jsx
@@ -35,7 +32,11 @@ Some components have special properties to support non-conforming APIs.
3532

3633
`draw` takes a callback which receives the `Graphics` context. Drawing will happen on every tick.
3734

38-
<EmbeddedEditor
39-
files={{ 'App.js': ExampleAppGraphics }}
40-
viewType={'editor'}
41-
width={'100%'} />
35+
```jsx
36+
<pixiGraphics draw={(graphics) => {
37+
graphics.clear();
38+
graphics.setFillStyle({ color: 'red' });
39+
graphics.rect(0, 0, 100, 100);
40+
graphics.fill();
41+
}} />
42+
```

‎docs/docs/extend.mdx

+12-14
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,22 @@
22
sidebar_position: 4
33
---
44

5-
import { EmbeddedEditor } from '@site/src/components/Editor/EmbeddedEditor';
6-
import ExampleApp from '!!raw-loader!../src/examples/extend/App';
7-
85
One of the most important concepts to understand with v8 is `extend`. Normally `@pixi/react` would have to import all pf Pixi.js to be able to provide the full library as JSX components. Instead, we use an internal catalogue of components populated by the `extend` API. This allows you to define exactly which parts of Pixi.js you want to import, keeping your bundle sizes small.
96

107
To allow `@pixi/react` to use a Pixi.js component, pass it to the `extend` API:
118

12-
<EmbeddedEditor
13-
files={{
14-
'App.js': {
15-
code: ExampleApp,
16-
active: true,
17-
}
18-
}}
19-
viewType={'editor'}
20-
width={'100%'} />
9+
```jsx
10+
import {
11+
Application,
12+
extend,
13+
} from '@pixi/react';
14+
import { Container } from 'pixi.js';
15+
16+
extend({ Container });
2117

22-
## ⚠️ WARNING ⚠️
23-
Attempting to use components that haven't been passed to the [`extend`][extend] API **will result in errors**.
18+
const MyComponent = () => (
19+
<pixiContainer />
20+
);
21+
```
2422

2523
[extend]: /extend

‎docs/docs/hooks/useApplication.mdx

+31-12
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,40 @@
1-
import { EmbeddedEditor } from '@site/src/components/Editor/EmbeddedEditor';
2-
import ExampleUseApplicationAccessible from '!!raw-loader!../../src/examples/useApplication-accessible/App';
3-
import ExampleUseApplicationInaccessible from '!!raw-loader!../../src/examples/useApplication-inaccessible/App';
4-
51
`useApplication` allows access to the parent `PIXI.Application` created by the `<Application>` component. This hook _will not work_ outside of an `<Application>` component. Additionally, the parent application is passed via [React Context][react-useContext]. This means `useApplication` will only work appropriately in _child components_, and in the same component that creates the `<Application>`.
62

73
For example, the following example `useApplication` **will not** be able to access the parent application:
84

9-
<EmbeddedEditor
10-
files={{ 'App.js': ExampleUseApplicationInaccessible }}
11-
viewType={'editor'}
12-
width={'100%'} />
5+
```jsx
6+
import {
7+
Application,
8+
useApplication,
9+
} from '@pixi/react';
10+
11+
const MyComponent = () => {
12+
// This will cause an invariant violation.
13+
const { app } = useApplication();
14+
15+
return <Application />;
16+
};
17+
```
1318

1419
Here's a working example where `useApplication` **will** be able to access the parent application:
1520

16-
<EmbeddedEditor
17-
files={{ 'App.js': ExampleUseApplicationAccessible }}
18-
viewType={'editor'}
19-
width={'100%'} />
21+
```jsx
22+
import {
23+
Application,
24+
useApplication,
25+
} from '@pixi/react';
26+
27+
const ChildComponent = () => {
28+
const { app } = useApplication();
29+
30+
return <container />;
31+
};
32+
33+
const MyComponent = () => (
34+
<Application>
35+
<ChildComponent />
36+
</Application>
37+
);
38+
```
2039

2140
[react-useContext]: https://react.dev/reference/react/useContext

‎docs/docs/hooks/useExtend.mdx

+19-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
1-
import { EmbeddedEditor } from '@site/src/components/Editor/EmbeddedEditor';
2-
import ExampleApp from '!!raw-loader!../../src/examples/useExtend/App';
3-
41
`useExtend` allows the `extend` API to be used as a React hook. Additionally, the `useExtend` hook is memoised, while the `extend` function is not.
52

6-
<EmbeddedEditor
7-
files={{ 'App.js': ExampleApp }}
8-
viewType={'editor'}
9-
width={'100%'} />
3+
```jsx
4+
import {
5+
Application,
6+
useExtend,
7+
} from '@pixi/react';
8+
import { Container } from 'pixi.js';
9+
10+
function ChildComponent() {
11+
useExtend({ Container });
12+
13+
return <pixiContainer />;
14+
};
15+
16+
const MyComponent = () => (
17+
<Application>
18+
<ChildComponent />
19+
</Application>
20+
);
21+
```

‎docs/docs/hooks/useTick.mdx

+90-22
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,106 @@
1-
import { EmbeddedEditor } from '@site/src/components/Editor/EmbeddedEditor';
2-
import ExampleApp from '!!raw-loader!../../src/examples/useTick/App';
3-
import ExampleAppMemoized from '!!raw-loader!../../src/examples/useTick-memoized/App';
4-
import ExampleAppUnmemoized from '!!raw-loader!../../src/examples/useTick-unmemoized/App';
5-
import ExampleAppWithOptions from '!!raw-loader!../../src/examples/useTick-options/App';
6-
71
`useTick` allows a callback to be attached to the [`Ticker`][pixi-ticker] on the parent application.
82

9-
<EmbeddedEditor
10-
files={{ 'App.js': ExampleApp }}
11-
viewType={'editor'}
12-
width={'100%'} />
3+
```jsx
4+
import {
5+
Application,
6+
useTick,
7+
} from '@pixi/react';
8+
9+
const ChildComponent = () => {
10+
useTick(() => console.log('This will be logged on every tick'));
11+
};
12+
13+
const MyComponent = () => (
14+
<Application>
15+
<ChildComponent />
16+
</Application>
17+
);
18+
```
1319

1420
`useTick` can also accept an options object. This allows control of all [`ticker.add`][pixi-ticker-add] options, as well as adding the `isEnabled` option. Setting `isEnabled` to `false` will cause the callback to be disabled until the argument is changed to true again.
1521

16-
<EmbeddedEditor
17-
files={{ 'App.js': ExampleAppWithOptions }}
18-
viewType={'editor'}
19-
width={'100%'} />
22+
```jsx
23+
import {
24+
Application,
25+
useTick,
26+
} from '@pixi/react';
27+
import { UPDATE_PRIORITY } from 'pixi.js'
28+
import { useRef } from 'react'
29+
30+
const ChildComponent = () => {
31+
const spriteRef = useRef(null)
32+
33+
useTick({
34+
callback() {
35+
// this === context
36+
this.current.rotation += 1
37+
},
38+
context: spriteRef,
39+
isEnabled: true,
40+
priority: UPDATE_PRIORITY.HIGH,
41+
})
42+
43+
return <pixiSprite ref={spriteRef} />
44+
};
45+
46+
const MyComponent = () => (
47+
<Application>
48+
<ChildComponent />
49+
</Application>
50+
);
51+
```
2052

2153
## ⚠️ WARNING ⚠️
2254

2355
The callback passed to `useTick` **is not memoised**. This can cause issues where your callback is being removed and added back to the ticker on every frame if you're mutating state in a component where `useTick` is using a non-memoised function. For example, this issue would affect the component below because we are mutating the state, causing the component to re-render constantly:
2456

25-
<EmbeddedEditor
26-
files={{ 'App.js': ExampleAppUnmemoized }}
27-
viewType={'editor'}
28-
width={'100%'} />
57+
```jsx
58+
import {
59+
Application,
60+
useTick,
61+
} from '@pixi/react';
62+
import { useState } from 'react'
63+
64+
const ChildComponent = () => {
65+
const [rotation, setRotation] = useState(0)
66+
67+
useTick(() => setRotation(previousState => previousState + 1));
68+
69+
return <pixiSprite rotation={rotation} />;
70+
};
71+
72+
const MyComponent = () => (
73+
<Application>
74+
<ChildComponent />
75+
</Application>
76+
);
77+
```
2978

3079
This issue can be solved by memoising the callback passed to `useTick`:
3180

32-
<EmbeddedEditor
33-
files={{ 'App.js': ExampleAppMemoized }}
34-
viewType={'editor'}
35-
width={'100%'} />
81+
```jsx
82+
import {
83+
Application,
84+
useTick,
85+
} from '@pixi/react';
86+
import { useCallback, useState } from 'react'
87+
88+
const ChildComponent = () => {
89+
const [rotation, setRotation] = useState(0)
90+
91+
const animateRotation = useCallback(() => setRotation(previousState => previousState + 1), []);
92+
93+
useTick(animateRotation);
94+
95+
return <pixiSprite rotation={rotation} />;
96+
};
97+
98+
const MyComponent = () => (
99+
<Application>
100+
<ChildComponent />
101+
</Application>
102+
);
103+
```
36104

37105
[pixi-ticker]: https://pixijs.download/release/docs/ticker.Ticker.html
38106
[pixi-ticker-add]: https://pixijs.download/release/docs/ticker.Ticker.html#add

0 commit comments

Comments
 (0)