├── .editorconfig ├── .github ├── CODE_OF_CONDUCT.md ├── actions │ └── setup │ │ └── action.yml ├── react.svg └── workflows │ ├── deploy-docs.yaml │ └── handle-release-branch-push.yml ├── .gitignore ├── .husky └── pre-commit ├── .vscode ├── launch.json └── settings.json ├── LICENSE ├── README.md ├── docs ├── docs │ ├── components │ │ ├── _category_.json │ │ ├── application.mdx │ │ ├── custom-components.mdx │ │ └── pixi-components.mdx │ ├── extend.mdx │ ├── getting-started.mdx │ ├── hooks │ │ ├── _category_.json │ │ ├── useApplication.mdx │ │ ├── useExtend.mdx │ │ └── useTick.mdx │ └── typescript.mdx ├── docusaurus.config.ts ├── package.json ├── sidebars.ts ├── src │ ├── components │ │ └── Editor │ │ │ ├── Editor.tsx │ │ │ ├── EmbeddedEditor.tsx │ │ │ ├── ExampleEditor.tsx │ │ │ ├── Monaco │ │ │ ├── MonacoView.tsx │ │ │ ├── glsl.ts │ │ │ ├── useFileLanguage.ts │ │ │ └── usePixiDefinitions.ts │ │ │ ├── PlaygroundEditor.tsx │ │ │ ├── Sandpack │ │ │ ├── ConsoleCounterButton.tsx │ │ │ ├── Layout.tsx │ │ │ ├── ToggleCodeButton.tsx │ │ │ └── ToggleGroup.tsx │ │ │ ├── defaults │ │ │ ├── demo.ts │ │ │ ├── styles.css │ │ │ └── theme.ts │ │ │ └── useContainerClassNameModifier.ts │ ├── css │ │ └── custom.css │ ├── examples │ │ └── basic │ │ │ ├── App.jsx │ │ │ └── BunnySprite.jsx │ ├── pages │ │ ├── CTA.tsx │ │ ├── index.module.css │ │ └── index.tsx │ └── typings.d.ts ├── static │ ├── .nojekyll │ ├── CNAME │ ├── img │ │ ├── demo.gif │ │ ├── favicon.png │ │ ├── logo-chrome.svg │ │ ├── logo-light.svg │ │ ├── logo-main.svg │ │ ├── logo.svg │ │ └── ogimage.png │ ├── social │ │ ├── discord.svg │ │ ├── github.svg │ │ ├── open-col-icon.svg │ │ └── twitter.svg │ └── v7 │ │ ├── code.png │ │ ├── font │ │ ├── desyrel.png │ │ └── desyrel.xml │ │ └── img │ │ ├── bunny.png │ │ ├── coin.png │ │ ├── docusaurus.png │ │ ├── favicon.png │ │ ├── mesh-placeholder.png │ │ ├── pixi-legacy-banner.png │ │ ├── pixi-react-example.png │ │ ├── pixi-react-logo.png │ │ ├── pixi-react-rainbow.png │ │ ├── pixi-v7-canvas-hello.png │ │ ├── snake.png │ │ ├── speech-bubble.png │ │ ├── tile.jpeg │ │ ├── typescript-custom-components.png │ │ └── typescript-support.png ├── tsconfig.json ├── versioned_docs │ └── version-7.x │ │ ├── about.jsx │ │ ├── about.mdx │ │ ├── components │ │ ├── AnimatedSprite.mdx │ │ ├── AnimatedSprite │ │ │ ├── index.jsx │ │ │ └── makeAnimatedSpriteTextures.js │ │ ├── BitmapText.jsx │ │ ├── BitmapText.mdx │ │ ├── Container.jsx │ │ ├── Container.mdx │ │ ├── ExampleAssetLoader.jsx │ │ ├── Graphics.jsx │ │ ├── Graphics.mdx │ │ ├── NineSlicePlane.jsx │ │ ├── NineSlicePlane.mdx │ │ ├── ParticleContainer.jsx │ │ ├── ParticleContainer.mdx │ │ ├── SimpleMesh.mdx │ │ ├── SimpleMesh │ │ │ ├── index.jsx │ │ │ └── makeSimpleMeshData.js │ │ ├── SimpleRope.jsx │ │ ├── SimpleRope.mdx │ │ ├── Sprite.jsx │ │ ├── Sprite.mdx │ │ ├── Text.jsx │ │ ├── Text.mdx │ │ ├── TilingSprite.jsx │ │ ├── TilingSprite.mdx │ │ └── _category_.json │ │ ├── context-bridge.mdx │ │ ├── custom-component.mdx │ │ ├── fallback-to-canvas.mdx │ │ ├── hoc │ │ ├── _category_.json │ │ └── with-filters.mdx │ │ ├── hooks │ │ └── Hooks.mdx │ │ ├── react-spring-tint.jsx │ │ ├── react-spring.jsx │ │ ├── react-spring.mdx │ │ ├── render │ │ └── Render.mdx │ │ ├── stage │ │ ├── Stage.jsx │ │ ├── Stage.mdx │ │ ├── raf.jsx │ │ └── raf2.jsx │ │ └── typescript.mdx ├── versioned_sidebars │ └── version-7.x-sidebars.json └── versions.json ├── eslint.config.mjs ├── package-lock.json ├── package.json ├── release.config.js ├── rollup.config.mjs ├── src ├── components │ ├── Application.tsx │ └── Context.ts ├── constants │ ├── EventPropNames.ts │ ├── NO_CONTEXT.ts │ ├── NameOverrides.ts │ ├── PixiReactIgnoredProps.ts │ └── ReactIgnoredProps.ts ├── core │ ├── createRoot.tsx │ ├── reconciler.ts │ └── roots.ts ├── global.ts ├── helpers │ ├── afterActiveInstanceBlur.ts │ ├── appendChild.ts │ ├── applyProps.ts │ ├── attach.ts │ ├── beforeActiveInstanceBlur.ts │ ├── catalogue.ts │ ├── clearContainer.ts │ ├── commitUpdate.ts │ ├── compare.ts │ ├── convertStringToPascalCase.ts │ ├── createInstance.ts │ ├── createReconciler.ts │ ├── createTextInstance.ts │ ├── detach.ts │ ├── detachDeletedInstance.ts │ ├── diffProps.ts │ ├── extend.ts │ ├── finalizeInitialChildren.ts │ ├── gentleClone.ts │ ├── gentleCloneProps.ts │ ├── getAssetKey.ts │ ├── getChildHostContext.ts │ ├── getCurrentUpdatePriority.ts │ ├── getInstanceFromNode.ts │ ├── getInstanceFromScope.ts │ ├── getPublicInstance.ts │ ├── getRootHostContext.ts │ ├── hideInstance.ts │ ├── hideTextInstance.ts │ ├── insertBefore.ts │ ├── invariant.ts │ ├── isDiffSet.ts │ ├── isReadOnlyProperty.ts │ ├── log.ts │ ├── maySuspendCommit.ts │ ├── parseComponentType.ts │ ├── preloadInstance.ts │ ├── prepareForCommit.ts │ ├── prepareInstance.ts │ ├── preparePortalMount.ts │ ├── prepareScopeUpdate.ts │ ├── prepareUpdate.ts │ ├── processUnmountQueue.ts │ ├── queueForUnmount.ts │ ├── removeChild.ts │ ├── requestPostPaintCallback.ts │ ├── resetAfterCommit.ts │ ├── resetFormInstance.ts │ ├── resolveEventTimeStamp.ts │ ├── resolveEventType.ts │ ├── resolveUpdatePriority.ts │ ├── setCurrentUpdatePriority.ts │ ├── shouldAttemptEagerTransition.ts │ ├── shouldSetTextContent.ts │ ├── startSuspendingCommit.ts │ ├── suspendInstance.ts │ ├── trackSchedulerEvent.ts │ ├── unhideInstance.ts │ ├── unhideTextInstance.ts │ ├── unmountRoot.ts │ ├── unqueueForUnmount.ts │ └── waitForCommitToBeReady.ts ├── hooks │ ├── useApplication.ts │ ├── useExtend.ts │ ├── useIsomorphicLayoutEffect.ts │ └── useTick.ts ├── index.ts ├── store.ts └── typedefs │ ├── ApplicationProps.ts │ ├── ApplicationRef.ts │ ├── ApplicationState.ts │ ├── AssetRetryOptions.ts │ ├── AssetRetryState.ts │ ├── BasePixiReactNode.ts │ ├── Change.ts │ ├── ConstructorOptions.ts │ ├── ConstructorOverrides.ts │ ├── CreateRootOptions.ts │ ├── DiffSet.ts │ ├── DrawCallback.ts │ ├── ErrorCallback.ts │ ├── EventHandlers.ts │ ├── EventPriority.ts │ ├── HostConfig.ts │ ├── InstanceState.ts │ ├── InternalState.ts │ ├── PixiComponents.ts │ ├── PixiElements.ts │ ├── PixiReactChildNode.ts │ ├── PixiReactNode.ts │ ├── PrefixedPixiElements.ts │ ├── Root.ts │ ├── UnprefixedPixiElements.ts │ ├── UnresolvedAsset.ts │ ├── UpdatePayload.ts │ ├── UseTickOptions.ts │ └── UtilityTypes.ts ├── test ├── e2e │ ├── components │ │ ├── Application.test.tsx │ │ └── __snapshots__ │ │ │ └── Application.test.tsx.snap │ └── hooks │ │ ├── useApplication.test.tsx │ │ └── useTick.test.tsx ├── tsconfig.json ├── unit │ ├── core │ │ └── createRoot.test.ts │ ├── helpers │ │ ├── afterActiveInstanceBlur.test.ts │ │ ├── appendChild.test.ts │ │ └── applyProps.test.ts │ ├── index.test.ts │ └── typedefs │ │ └── PixiElements.test.tsx └── utils │ ├── getAppRoot.ts │ └── isAppMounted.ts ├── tsconfig.json ├── tsconfig.test.json ├── vitest.config.ts ├── vitest.setup.ts └── vitest.workspace.ts /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs. 2 | # More information at http://EditorConfig.org 3 | root = true 4 | 5 | [*] 6 | end_of_line = lf 7 | insert_final_newline = true 8 | trim_trailing_whitespace = true 9 | indent_style = space 10 | indent_size = 4 11 | 12 | [{*.json,*.yml,*.md}] 13 | indent_size = 2 14 | -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at matt@mattkarl.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /.github/actions/setup/action.yml: -------------------------------------------------------------------------------- 1 | name: "Setup the project" 2 | description: "Installs node, npm, and dependencies" 3 | 4 | runs: 5 | using: "composite" 6 | steps: 7 | - name: Setup Node.js 8 | uses: actions/setup-node@v4 9 | with: 10 | node-version: lts/* 11 | registry-url: "https://registry.npmjs.org" 12 | 13 | - name: Get npm cache directory 14 | id: npm-cache-dir 15 | shell: bash 16 | run: echo "dir=$(npm config get cache)" >> ${GITHUB_OUTPUT} 17 | 18 | - name: Cache dependencies 19 | uses: actions/cache@v4 20 | id: npm-cache 21 | with: 22 | path: ${{ steps.npm-cache-dir.outputs.dir }} 23 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 24 | restore-keys: | 25 | ${{ runner.os }}-node- 26 | 27 | - name: Install dependencies 28 | if: steps.node-modules-cache.outputs.cache-hit != 'true' 29 | shell: bash 30 | run: npm ci --ignore-scripts --no-audit --no-fund 31 | 32 | # - name: Rebuild binaries 33 | # if: steps.node-modules-cache.outputs.cache-hit != 'true' 34 | # shell: bash 35 | # run: npm rebuild 36 | -------------------------------------------------------------------------------- /.github/workflows/deploy-docs.yaml: -------------------------------------------------------------------------------- 1 | name: Deploy Docs 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - docs 8 | 9 | concurrency: 10 | group: ${{ github.workflow }}-${{ github.ref || github.run_id }} 11 | cancel-in-progress: true 12 | 13 | jobs: 14 | deploy: 15 | name: Deploy 16 | runs-on: ubuntu-latest 17 | steps: 18 | - uses: actions/checkout@v4 19 | 20 | - uses: actions/setup-node@v4 21 | with: 22 | node-version: '20' 23 | cache: 'npm' 24 | 25 | - run: npm ci 26 | - run: | 27 | git config --global user.name "$GITHUB_ACTOR" 28 | git config --global user.email "$GITHUB_ACTOR@users.noreply.github.com" 29 | git remote set-url origin https://git:${GIT_PASS}@github.com/pixijs/pixi-react.git 30 | npm run deploy 31 | env: 32 | GIT_USER: $GITHUB_ACTOR 33 | GIT_PASS: ${{ secrets.GITHUB_TOKEN }} 34 | -------------------------------------------------------------------------------- /.github/workflows/handle-release-branch-push.yml: -------------------------------------------------------------------------------- 1 | name: Handle Release Branch Push 2 | 3 | on: 4 | merge_group: 5 | pull_request: 6 | push: 7 | 8 | jobs: 9 | verify: 10 | name: Verify 11 | runs-on: ubuntu-latest 12 | strategy: 13 | matrix: 14 | script: 15 | - name: Typecheck 16 | command: test:types 17 | installPlaywright: false 18 | - name: Lint 19 | command: test:lint 20 | installPlaywright: false 21 | - name: Unit tests 22 | command: test:unit 23 | installPlaywright: false 24 | - name: E2E tests 25 | command: test:e2e 26 | installPlaywright: true 27 | - name: Docs 28 | command: build:docs 29 | installPlaywright: false 30 | steps: 31 | - name: Checkout 32 | uses: actions/checkout@v4 33 | with: 34 | fetch-depth: 0 35 | 36 | - name: Setup 37 | uses: ./.github/actions/setup 38 | 39 | - name: Install Playwright browsers 40 | if: ${{ matrix.script.installPlaywright }} 41 | run: npx playwright install 42 | 43 | - name: ${{ matrix.script.name }} 44 | run: npm run ${{ matrix.script.command }} 45 | 46 | publish: 47 | name: 'Publish: Release' 48 | needs: 49 | - verify 50 | if: contains(fromJson('["refs/heads/alpha", "refs/heads/beta", "refs/heads/main"]'), github.ref) 51 | runs-on: ubuntu-latest 52 | steps: 53 | - name: Checkout 54 | uses: actions/checkout@v4 55 | with: 56 | fetch-depth: 0 57 | 58 | - name: Setup project 59 | uses: ./.github/actions/setup 60 | 61 | - name: Build Project 62 | run: npm run build 63 | shell: bash 64 | 65 | - name: Semantic release 66 | env: 67 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 68 | id: release 69 | run: | 70 | export NEXT_TAG_VERSION=$(npx semantic-release | tee >(cat >&2) | grep 'The next release version is' | sed -E 's/.* ([[:digit:].]+)$/\1/') 71 | echo "new_tag_version=${NEXT_TAG_VERSION}" >> $GITHUB_OUTPUT 72 | shell: bash 73 | 74 | - name: Publish to npm 75 | env: 76 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 77 | if: ${{ steps.release.outputs.new_tag_version != '' }} 78 | run: npm publish ./dist/*.tgz --tag ${{ (github.head_ref || github.ref_name) == 'main' && 'latest' || github.head_ref || github.ref_name }} 79 | shell: bash 80 | 81 | # dev-publish: 82 | # name: 'Publish: Dev' 83 | # needs: 84 | # - verify 85 | # if: contains(fromJson('["refs/heads/alpha", "refs/heads/beta", "refs/heads/main"]'), github.ref) == 'false' 86 | # runs-on: ubuntu-latest 87 | # steps: 88 | # - name: Checkout 89 | # uses: actions/checkout@v4 90 | # with: 91 | # fetch-depth: 0 92 | 93 | # - name: Setup project 94 | # uses: ./.github/actions/setup 95 | 96 | # - name: Build project 97 | # run: npm run build 98 | # shell: bash 99 | 100 | # - name: Get current version 101 | # run: echo "PACKAGE_VERSION=$(npm pkg get version | tr -d '"')" >> $GITHUB_ENV 102 | 103 | # - name: Setup dev version 104 | # run: echo "BRANCH_VERSION=$PACKAGE_VERSION-$BRANCH_NAME.${GITHUB_SHA::7}" >> $GITHUB_ENV 105 | 106 | # - name: Bump version 107 | # run: npm version $BRANCH_VERSION --no-git-tag-version --force 108 | 109 | # - name: Publish a dev release 110 | # run: npm publish --tag dev 111 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .eslintcache 3 | .DS_Store 4 | packages/*/stats.html 5 | node_modules/ 6 | dist/ 7 | lib/ 8 | types/ 9 | 10 | # Generated files 11 | .docusaurus 12 | .cache-loader 13 | docs/build 14 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "type": "node", 7 | "request": "launch", 8 | "name": "Debug Current Test File", 9 | "autoAttachChildProcesses": true, 10 | "skipFiles": ["/**", "**/node_modules/tinyspy/**", "**/node_modules/@vitest/**"], 11 | "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs", 12 | "args": ["run", "${relativeFile}"], 13 | "smartStep": true, 14 | "console": "integratedTerminal" 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Patrick Brouwer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/docs/components/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Components", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /docs/docs/components/application.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | title: Application 4 | --- 5 | 6 | The `` component is used to wrap your `@pixi/react` app. The `` component can take [all props that can be set][pixi-ApplicationOptions] on [`PIXI.Application`][pixi-Application]. 7 | 8 | ## Example Usage 9 | 10 | ```jsx 11 | import { Application } from '@pixi/react'; 12 | 13 | const MyComponent = () => ( 14 | 15 | ); 16 | ``` 17 | 18 | ## Props 19 | 20 | ### `defaultTextStyle` 21 | 22 | `defaultTextStyle` is a convenience property. Whatever is passed will automatically be assigned to Pixi.js's [`TextStyle.defaultTextStyle`][pixi-defaultTextStyle]. 23 | 24 | > [!NOTE] 25 | > This property **is not retroactive**. It will only apply to text components created after `defaultTextStyle` is set. Any text components created before setting `defaultTextStyle` will retain the base styles they had before `defaultTextStyle` was changed. 26 | 27 | ### `extensions` 28 | 29 | `extensions` is an array of extensions to be loaded. Adding and removing items from this array will automatically load/unload the extensions. The first time this is handled happens before the application is initialised. See Pixi.js's [`extensions`][pixi-extensions] documentation for more info on extensions. 30 | 31 | ### `resizeTo` 32 | 33 | The `` component supports the `resizeTo` property, with some additional functionality: it can accept any HTML element **or** it can take a React `ref` directly. 34 | 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 |
44 | 45 |
46 | ); 47 | }; 48 | ``` 49 | 50 | [pixi-Application]: https://pixijs.download/release/docs/app.Application.html 51 | [pixi-ApplicationOptions]: https://pixijs.download/release/docs/app.ApplicationOptions.html 52 | [pixi-defaultTextStyle]: https://pixijs.download/release/docs/text.TextStyle.html#defaultTextStyle 53 | [pixi-extensions]: https://pixijs.download/release/docs/extensions.html 54 | -------------------------------------------------------------------------------- /docs/docs/components/custom-components.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | title: Custom Components 4 | --- 5 | 6 | Custom components are supported via the `extend` API. For example, you can create a `` component using the [`pixi-viewport`][pixi-viewport] library: 7 | 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 | 19 | 20 | 21 | 22 | 23 | ); 24 | ``` 25 | 26 | 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]. 27 | 28 | [pixi-viewport]: https://github.com/pixijs-userland/pixi-viewport 29 | [typescript]: /typescript 30 | -------------------------------------------------------------------------------- /docs/docs/components/pixi-components.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | title: Pixi.js Components 4 | --- 5 | 6 | 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: 7 | 8 | ```jsx 9 | 10 | 11 | 12 | 13 | 14 | 15 | ``` 16 | 17 | Additionally, all properties of Pixi.js classes are available as properties on these components. 18 | 19 | ```jsx 20 | 21 | 22 | 23 | ``` 24 | 25 | ## Special Properties 26 | 27 | Some components have special properties to support non-conforming APIs. 28 | 29 | ### `` 30 | 31 | #### `draw` 32 | 33 | `draw` takes a callback which receives the `Graphics` context. Drawing will happen on every tick. 34 | 35 | ```jsx 36 | { 37 | graphics.clear(); 38 | graphics.setFillStyle({ color: 'red' }); 39 | graphics.rect(0, 0, 100, 100); 40 | graphics.fill(); 41 | }} /> 42 | ``` 43 | -------------------------------------------------------------------------------- /docs/docs/extend.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | One of the most important concepts to understand with v8 is `extend`. Normally `@pixi/react` would have to import all of 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. 6 | 7 | To allow `@pixi/react` to use a Pixi.js component, pass it to the `extend` API: 8 | 9 | ```jsx 10 | import { 11 | Application, 12 | extend, 13 | } from '@pixi/react'; 14 | import { Container } from 'pixi.js'; 15 | 16 | extend({ Container }); 17 | 18 | const MyComponent = () => ( 19 | 20 | ); 21 | ``` 22 | 23 | [extend]: /extend 24 | -------------------------------------------------------------------------------- /docs/docs/getting-started.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | title: Getting Started 4 | --- 5 | 6 | import { EmbeddedEditor } from '@site/src/components/Editor/EmbeddedEditor'; 7 | import ExampleApp from '!!raw-loader!../src/examples/basic/App'; 8 | import ExampleBunnySprite from '!!raw-loader!../src/examples/basic/BunnySprite'; 9 | 10 | To add `@pixi/react` to an existing React application, install the necessary dependencies: 11 | 12 | ```bash 13 | npm install pixi.js@^8.2.6 @pixi/react@beta 14 | ``` 15 | 16 | ## Does it have limitations? 17 | 18 | None. Everything that works in Pixi.js will work here without exception. 19 | 20 | {/* ## Is it slower than plain Threejs? */} 21 | {/* No. There is no overhead. Components render outside of React. It outperforms Threejs in scale due to React's scheduling abilities. */} 22 | 23 | ## Can it keep up with frequent feature updates to Pixi.js? 24 | Yes. `@pixi/react` is a thin wrapper around Pixi.js, allowing it to be expressed via JSX. For example, `` is backed by a Pixi.js [`Sprite`][pixi-sprite]. If a feature is added, removed, or changed in Pixi.js, those changes will be available to you without updating `@pixi/react`. 25 | 26 | ## What does it look like? 27 | 28 | Let's make a reusable component that has its own state, reacts to user-input and participates in the render-loop: 29 | 30 | 37 | 38 | [pixi-sprite]: https://pixijs.download/release/docs/scene.Sprite.html 39 | -------------------------------------------------------------------------------- /docs/docs/hooks/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Hooks", 3 | "position": 3 4 | } 5 | -------------------------------------------------------------------------------- /docs/docs/hooks/useApplication.mdx: -------------------------------------------------------------------------------- 1 | `useApplication` allows access to the parent `PIXI.Application` created by the `` component. This hook _will not work_ outside of an `` 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 ``. 2 | 3 | For example, the following example `useApplication` **will not** be able to access the parent application: 4 | 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 ; 16 | }; 17 | ``` 18 | 19 | Here's a working example where `useApplication` **will** be able to access the parent application: 20 | 21 | ```jsx 22 | import { 23 | Application, 24 | useApplication, 25 | } from '@pixi/react'; 26 | 27 | const ChildComponent = () => { 28 | const { app } = useApplication(); 29 | 30 | return ; 31 | }; 32 | 33 | const MyComponent = () => ( 34 | 35 | 36 | 37 | ); 38 | ``` 39 | 40 | [react-useContext]: https://react.dev/reference/react/useContext 41 | -------------------------------------------------------------------------------- /docs/docs/hooks/useExtend.mdx: -------------------------------------------------------------------------------- 1 | `useExtend` allows the `extend` API to be used as a React hook. Additionally, the `useExtend` hook is memoised, while the `extend` function is not. 2 | 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 ; 14 | }; 15 | 16 | const MyComponent = () => ( 17 | 18 | 19 | 20 | ); 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/docs/hooks/useTick.mdx: -------------------------------------------------------------------------------- 1 | `useTick` allows a callback to be attached to the [`Ticker`][pixi-ticker] on the parent application. 2 | 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 | 15 | 16 | 17 | ); 18 | ``` 19 | 20 | `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. 21 | 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 44 | }; 45 | 46 | const MyComponent = () => ( 47 | 48 | 49 | 50 | ); 51 | ``` 52 | 53 | ## ⚠️ WARNING ⚠️ 54 | 55 | 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: 56 | 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 ; 70 | }; 71 | 72 | const MyComponent = () => ( 73 | 74 | 75 | 76 | ); 77 | ``` 78 | 79 | This issue can be solved by memoising the callback passed to `useTick`: 80 | 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 ; 96 | }; 97 | 98 | const MyComponent = () => ( 99 | 100 | 101 | 102 | ); 103 | ``` 104 | 105 | [pixi-ticker]: https://pixijs.download/release/docs/ticker.Ticker.html 106 | [pixi-ticker-add]: https://pixijs.download/release/docs/ticker.Ticker.html#add 107 | -------------------------------------------------------------------------------- /docs/docs/typescript.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Typescript 3 | --- 4 | 5 | ## Extending Built-in Components 6 | 7 | The props for built-in components are available on the `PixiElements` type and can be used to extend the built-in types. 8 | 9 | ```tsx 10 | import { type Texture } from 'pixi.js'; 11 | import { type PixiElements } from '@pixi/react'; 12 | 13 | export type TilingSpriteProps = PixiElements['pixiTilingSprite'] & { 14 | image?: string; 15 | texture?: Texture; 16 | }; 17 | ``` 18 | 19 | ## Custom Components 20 | 21 | `@pixi/react` already offers types for built-in components, but custom components need to be added to the library's type catalogue so it knows how to handle them. This can be achieved by adding your custom components to the `PixiElements` interface. Here's what it may look like to add the `viewport` component from our earlier `extend` example: 22 | 23 | ```tsx 24 | // global.d.ts 25 | import { type Viewport } from 'pixi-viewport'; 26 | import { type PixiReactElementProps } from '@pixi/react'; 27 | 28 | declare module '@pixi/react' 29 | { 30 | interface PixiElements 31 | { 32 | viewport: PixiReactElementProps; 33 | } 34 | } 35 | ``` 36 | 37 | Now you'll be able to use your custom component in your project without any type errors! 38 | 39 | ## Unprefixed Elements 40 | 41 | If you like to live life on the wild side, you can enable unprefixed Pixi elements (i.e. `` instead of ``) by adding the `UnprefixedPixiElements` interface to the `PixiElements` interface. 42 | 43 | ```tsx 44 | // global.d.ts 45 | import { type UnprefixedPixiElements } from '@pixi/react'; 46 | 47 | declare module '@pixi/react' 48 | { 49 | interface PixiElements extends UnprefixedPixiElements {} 50 | } 51 | ``` 52 | 53 | The prefixed and unprefixed elements have the same functionality, but we recommend sticking to the prefixed components to avoid collisions with other libraries that add intrinsic elements to JSX (such as [`react-dom`][react-dom] and [`@react-three/fiber`][react-three-fiber]). 54 | 55 | > [!IMPORTANT] 56 | > Some components conflict with other libaries, such as `` in `react-dom` and `` in `@react-three/fiber`. To address this the `pixi` prefixed elements are always available, even after injecting the unprefixed elements. 57 | 58 | [react-dom]: https://www.npmjs.com/package/react-dom 59 | [react-three-fiber]: https://www.npmjs.com/package/@react-three/fiber 60 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "docusaurus": "docusaurus", 7 | "start": "docusaurus start", 8 | "build": "docusaurus build", 9 | "swizzle": "docusaurus swizzle", 10 | "deploy": "docusaurus deploy", 11 | "clear": "docusaurus clear", 12 | "serve": "docusaurus serve", 13 | "write-translations": "docusaurus write-translations", 14 | "write-heading-ids": "docusaurus write-heading-ids", 15 | "typecheck": "tsc" 16 | }, 17 | "dependencies": { 18 | "@codesandbox/sandpack-react": "^2.19.11", 19 | "@codesandbox/sandpack-themes": "^2.0.21", 20 | "@docusaurus/core": "3.7.0", 21 | "@docusaurus/faster": "^3.7.0", 22 | "@docusaurus/preset-classic": "3.7.0", 23 | "@mdx-js/react": "^3.1.0", 24 | "@monaco-editor/react": "^4.7.0-rc.0", 25 | "@pixi/react": "8.0.0-beta.24", 26 | "clsx": "^2.1.1", 27 | "prism-react-renderer": "^2.4.1", 28 | "raw-loader": "^4.0.2", 29 | "react": "^19.0.0", 30 | "react-dom": "^19.0.0" 31 | }, 32 | "devDependencies": { 33 | "@docusaurus/module-type-aliases": "3.7.0", 34 | "@docusaurus/tsconfig": "3.7.0", 35 | "@docusaurus/types": "3.7.0", 36 | "typescript": "~5.7.3" 37 | }, 38 | "browserslist": { 39 | "production": [ 40 | ">0.5%", 41 | "not dead", 42 | "not op_mini all" 43 | ], 44 | "development": [ 45 | "last 3 chrome version", 46 | "last 3 firefox version", 47 | "last 5 safari version" 48 | ] 49 | }, 50 | "engines": { 51 | "node": ">=18.0" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /docs/sidebars.ts: -------------------------------------------------------------------------------- 1 | import type { SidebarsConfig } from '@docusaurus/plugin-content-docs'; 2 | 3 | /** 4 | * Creating a sidebar enables you to: 5 | - create an ordered group of docs 6 | - render a sidebar for each doc of that group 7 | - provide next/previous navigation 8 | 9 | The sidebars can be generated from the filesystem, or explicitly defined here. 10 | 11 | Create as many sidebars as you want. 12 | */ 13 | const sidebars: SidebarsConfig = { 14 | docs: [{ type: 'autogenerated', dirName: '.' }] 15 | }; 16 | 17 | export default sidebars; 18 | -------------------------------------------------------------------------------- /docs/src/components/Editor/Editor.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { dracula } from './defaults/theme'; 3 | import { EditorLayout } from './Sandpack/Layout'; 4 | import StylesFile from '!!raw-loader!./defaults/styles.css'; 5 | import { SandpackProvider } from '@codesandbox/sandpack-react'; 6 | import { githubLight } from '@codesandbox/sandpack-themes'; 7 | import BrowserOnly from '@docusaurus/BrowserOnly'; 8 | import { useColorMode } from '@docusaurus/theme-common'; 9 | 10 | export interface EditorProps 11 | { 12 | viewType?: 'both' | 'editor' | 'preview'; 13 | showConsole?: boolean; 14 | width?: number | string; 15 | height?: number | string; 16 | version?: 'v7' | 'v8'; 17 | dependencies?: Record; 18 | files?: Record; 19 | fontSize?: number; 20 | handleEditorCodeChanged?: (nextSourceCode: string | undefined) => void; 21 | } 22 | 23 | const v7Dependencies = { 24 | 'pixi.js': '^7', 25 | '@pixi/react': '^7', 26 | react: '^18', 27 | 'react-dom': '^18', 28 | }; 29 | 30 | const v8Dependencies = { 31 | '@pixi/react': 'beta', 32 | 'pixi.js': '^8', 33 | 'pixi-viewport': '^6', 34 | react: '^19', 35 | 'react-dom': '^19', 36 | }; 37 | 38 | export function Editor({ 39 | viewType = 'both', 40 | showConsole = false, 41 | width = '100%', 42 | height = '100%', 43 | version = 'v8', 44 | dependencies, 45 | files = {}, 46 | fontSize = 12, 47 | handleEditorCodeChanged, 48 | }: EditorProps) 49 | { 50 | const { colorMode } = useColorMode(); 51 | 52 | const filesWithoutIndexJs = { ...files }; 53 | 54 | // delete filesWithoutIndexJs['App.js']; 55 | 56 | const [filesState] = useState({ 57 | '/styles.css': { code: StylesFile, hidden: true }, 58 | 'sandbox.config.json': { code: `{"infiniteLoopProtection": false}`, hidden: true }, 59 | '/public/index.html': { 60 | code: ` 61 | 62 | 63 | 64 | 65 | Document 66 | 67 | 68 |
69 | 70 | `, 71 | hidden: true, 72 | }, 73 | '/index.js': { 74 | code: `import React from "react"; 75 | import { createRoot } from "react-dom/client"; 76 | import "./styles.css"; 77 | 78 | import App from "./App"; 79 | 80 | const root = createRoot(document.getElementById("root")); 81 | root.render( 82 | 83 | );`, 84 | hidden: true, 85 | }, 86 | ...filesWithoutIndexJs, 87 | }); 88 | 89 | dependencies ??= version === 'v7' ? v7Dependencies : v8Dependencies; 90 | 91 | return ( 92 | 93 | {() => ( 94 | 101 | 107 | 108 | )} 109 | 110 | ); 111 | } 112 | -------------------------------------------------------------------------------- /docs/src/components/Editor/EmbeddedEditor.tsx: -------------------------------------------------------------------------------- 1 | import { Editor, type EditorProps } from './Editor'; 2 | 3 | export function EmbeddedEditor(props: EditorProps) 4 | { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /docs/src/components/Editor/ExampleEditor.tsx: -------------------------------------------------------------------------------- 1 | import { Editor, type EditorProps } from './Editor'; 2 | import { useContainerClassNameModifier } from './useContainerClassNameModifier'; 3 | 4 | export function ExampleEditor(props: EditorProps) 5 | { 6 | // hack the .container class to add a modifier 7 | useContainerClassNameModifier('example', true); 8 | 9 | return ; 10 | } 11 | -------------------------------------------------------------------------------- /docs/src/components/Editor/Monaco/MonacoView.tsx: -------------------------------------------------------------------------------- 1 | import { useFileLanguage } from './useFileLanguage'; 2 | import { usePixiMonaco } from './usePixiDefinitions'; 3 | import { FileTabs, SandpackStack, useActiveCode, useSandpack } from '@codesandbox/sandpack-react'; 4 | import { useColorMode } from '@docusaurus/theme-common'; 5 | import { Editor, useMonaco } from '@monaco-editor/react'; 6 | 7 | import type { CSSProperties } from 'react'; 8 | 9 | interface MonacoViewProps 10 | { 11 | fontSize?: number; 12 | style?: CSSProperties; 13 | pixiVersion: string; 14 | handleEditorCodeChanged?: (nextSourceCode: string | undefined) => void; 15 | } 16 | export function MonacoView({ fontSize = 12, style, pixiVersion, handleEditorCodeChanged }: MonacoViewProps) 17 | { 18 | const { code, updateCode } = useActiveCode(); 19 | const { sandpack } = useSandpack(); 20 | const monaco = useMonaco(); 21 | const language = useFileLanguage(sandpack.activeFile); 22 | const { colorMode } = useColorMode(); 23 | 24 | usePixiMonaco(monaco, pixiVersion); 25 | 26 | return ( 27 | 28 | 29 |
30 | 38 | { 39 | updateCode(value || ''); 40 | handleEditorCodeChanged?.(value); 41 | }} 42 | options={{ 43 | minimap: { enabled: false }, 44 | scrollBeyondLastLine: false, 45 | automaticLayout: true, 46 | fontSize, 47 | }} 48 | /> 49 |
50 | 51 | ); 52 | } 53 | -------------------------------------------------------------------------------- /docs/src/components/Editor/Monaco/useFileLanguage.ts: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | 3 | const getFileExtension = (filename: string): string => 4 | { 5 | const parts = filename.split('.'); 6 | 7 | return parts[parts.length - 1]; 8 | }; 9 | 10 | const getLanguage = (filename: string): string => 11 | { 12 | const extension = getFileExtension(filename); 13 | 14 | if (extension === 'js') 15 | { 16 | return 'javascript'; 17 | } 18 | 19 | if (extension === 'ts') 20 | { 21 | return 'typescript'; 22 | } 23 | 24 | if (extension === 'vert' || extension === 'frag') 25 | { 26 | return 'glsl'; 27 | } 28 | 29 | return extension; 30 | }; 31 | 32 | export const useFileLanguage = (filename: string) => 33 | { 34 | const language = useMemo(() => getLanguage(filename), [filename]); 35 | 36 | return language; 37 | }; 38 | -------------------------------------------------------------------------------- /docs/src/components/Editor/Monaco/usePixiDefinitions.ts: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | import { registerGLSL } from './glsl'; 3 | 4 | import type { Monaco } from '@monaco-editor/react'; 5 | 6 | function getStorageValue(key: string, defaultValue: T) 7 | { 8 | // getting stored value 9 | const saved = localStorage.getItem(key); 10 | const initial = JSON.parse(saved as string) as T; 11 | 12 | return initial || defaultValue; 13 | } 14 | 15 | export const getPixiDefinitions = async (version: string) => 16 | { 17 | const key = `pixi-definitions-${version}`; 18 | const value = getStorageValue(key, null); 19 | 20 | if (!value) 21 | { 22 | try 23 | { 24 | const response = await fetch(`https://cdn.jsdelivr.net/npm/pixi.js@${version}/dist/pixi.js.d.ts`); 25 | const pixiTypes = await response.text(); 26 | 27 | if (pixiTypes.startsWith('// Generated by dts-bundle-generator')) 28 | { 29 | localStorage.setItem(key, JSON.stringify(pixiTypes)); 30 | 31 | return pixiTypes; 32 | } 33 | 34 | return null; 35 | } 36 | catch (error) 37 | { 38 | console.error('Failed to fetch pixi.js types:', error); 39 | 40 | return null; 41 | } 42 | } 43 | 44 | return value; 45 | }; 46 | 47 | export const usePixiMonaco = (monaco: Monaco | null, version = 'latest') => 48 | { 49 | useEffect(() => 50 | { 51 | const handleEditorWillMount = async (monaco: Monaco) => 52 | { 53 | const pixiTypes = await getPixiDefinitions(version); 54 | 55 | const pixiModuleDeclaration = `declare module 'pixi.js' { ${pixiTypes} }`; 56 | const shaderModuleDeclaration = ` 57 | declare module '*.wgsl' { 58 | const shader: 'string'; 59 | export default shader; 60 | } 61 | 62 | declare module '*.vert' { 63 | const shader: 'string'; 64 | export default shader; 65 | } 66 | 67 | declare module '*.frag' { 68 | const shader: 'string'; 69 | export default shader; 70 | }`; 71 | 72 | monaco.languages.typescript.typescriptDefaults.addExtraLib( 73 | pixiModuleDeclaration, 74 | `file:///node_modules/pixi.js/index.d.ts`, 75 | ); 76 | monaco.languages.typescript.javascriptDefaults.addExtraLib( 77 | pixiModuleDeclaration, 78 | `file:///node_modules/pixi.js/index.d.ts`, 79 | ); 80 | 81 | monaco.languages.typescript.typescriptDefaults.addExtraLib(shaderModuleDeclaration); 82 | monaco.languages.typescript.javascriptDefaults.addExtraLib(shaderModuleDeclaration); 83 | 84 | registerGLSL(monaco); 85 | }; 86 | 87 | if (monaco) 88 | { 89 | void handleEditorWillMount(monaco); 90 | } 91 | }, [monaco, version]); 92 | }; 93 | -------------------------------------------------------------------------------- /docs/src/components/Editor/PlaygroundEditor.tsx: -------------------------------------------------------------------------------- 1 | import { Editor, type EditorProps } from './Editor'; 2 | import { useContainerClassNameModifier } from './useContainerClassNameModifier'; 3 | 4 | export function PlaygroundEditor(props: EditorProps) 5 | { 6 | // hack the .container class to add a modifier 7 | useContainerClassNameModifier('example', true); 8 | 9 | return ; 10 | } 11 | -------------------------------------------------------------------------------- /docs/src/components/Editor/Sandpack/ConsoleCounterButton.tsx: -------------------------------------------------------------------------------- 1 | import { ConsoleIcon, RoundedButton } from '@codesandbox/sandpack-react'; 2 | 3 | interface ConsoleCounterButtonProps 4 | { 5 | onClick: () => void; 6 | } 7 | export const ConsoleCounterButton: React.FC = ({ onClick }: ConsoleCounterButtonProps) => ( 8 | 14 | 15 | 16 | ); 17 | -------------------------------------------------------------------------------- /docs/src/components/Editor/Sandpack/ToggleCodeButton.tsx: -------------------------------------------------------------------------------- 1 | import { RoundedButton } from '@codesandbox/sandpack-react'; 2 | 3 | const SVG: React.FC> = (props) => ( 4 | 5 | ); 6 | 7 | export const BackwardIcon = (): React.ReactElement => ( 8 | 9 | Close Code Editor 10 | 11 | 12 | ); 13 | 14 | export const ForwardIcon = (): React.ReactElement => ( 15 | 16 | Open Code Editor 17 | 18 | 19 | ); 20 | 21 | interface ToggleCodeButtonProps 22 | { 23 | onClick: () => void; 24 | visible: boolean; 25 | } 26 | export const ToggleCodeButton: React.FC = ({ onClick, visible }: ToggleCodeButtonProps) => ( 27 | 33 | {visible ? : } 34 | 35 | ); 36 | -------------------------------------------------------------------------------- /docs/src/components/Editor/Sandpack/ToggleGroup.tsx: -------------------------------------------------------------------------------- 1 | import { type FC, useState } from 'react'; 2 | import { useColorMode } from '@docusaurus/theme-common'; 3 | 4 | interface ToggleGroupProps 5 | { 6 | onSelectionChange: (selected: 'editor' | 'preview' | 'both') => void; 7 | defaultSelection?: string; 8 | } 9 | 10 | export const ToggleGroup: FC = ({ onSelectionChange, defaultSelection = 'both' }) => 11 | { 12 | const [selected, setSelected] = useState(defaultSelection); 13 | const { colorMode } = useColorMode(); 14 | 15 | const handleClick = (button: 'editor' | 'preview' | 'both') => 16 | { 17 | setSelected(button); 18 | onSelectionChange(button); 19 | }; 20 | 21 | const buttonStyle = { 22 | height: '100%', 23 | width: 'max-content', 24 | padding: '0 16px', 25 | display: 'flex', 26 | alignItems: 'center', 27 | justifyContent: 'center', 28 | cursor: 'pointer', 29 | color: colorMode === 'dark' ? '#F6F8FA' : '#2E3138', 30 | border: 'none', 31 | }; 32 | 33 | const selectedBackgroundColor = colorMode === 'dark' ? '#22232A' : '#e2e2e2'; 34 | 35 | return ( 36 |
48 | 54 | 60 | 66 |
67 | ); 68 | }; 69 | -------------------------------------------------------------------------------- /docs/src/components/Editor/defaults/demo.ts: -------------------------------------------------------------------------------- 1 | import { Application, Assets, Sprite } from 'pixi.js'; 2 | 3 | void (async () => 4 | { 5 | // Create a new application 6 | const app = new Application(); 7 | 8 | // Initialize the application 9 | await app.init({ background: '#1099bb', resizeTo: window }); 10 | 11 | // Append the application canvas to the document body 12 | document.body.appendChild(app.canvas); 13 | 14 | // Load the bunny texture 15 | const texture = await Assets.load('https://pixijs.com/assets/bunny.png'); 16 | 17 | // Create a bunny Sprite 18 | const bunny = new Sprite(texture); 19 | 20 | // Center the sprite's anchor point 21 | bunny.anchor.set(0.5); 22 | 23 | // Move the sprite to the center of the screen 24 | bunny.x = app.screen.width / 2; 25 | bunny.y = app.screen.height / 2; 26 | 27 | app.stage.addChild(bunny); 28 | 29 | // Listen for animate update 30 | app.ticker.add((time) => 31 | { 32 | // Just for fun, let's rotate mr rabbit a little. 33 | // * Delta is 1 if running at 100% performance * 34 | // * Creates frame-independent transformation * 35 | bunny.rotation += 0.1 * time.deltaTime; 36 | }); 37 | })(); 38 | -------------------------------------------------------------------------------- /docs/src/components/Editor/defaults/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | overflow: hidden; 4 | } 5 | -------------------------------------------------------------------------------- /docs/src/components/Editor/defaults/theme.ts: -------------------------------------------------------------------------------- 1 | import type { SandpackThemeProp } from '@codesandbox/sandpack-react'; 2 | 3 | export const dracula: SandpackThemeProp = { 4 | colors: { 5 | surface1: '#242426', 6 | surface2: '#444950', 7 | surface3: '#44475a', 8 | clickable: '#fff', 9 | base: '#f8f8f2', 10 | disabled: '#6272a4', 11 | hover: '#f8f8f2', 12 | accent: '#e91e63', 13 | error: '#f8f8f2', 14 | errorSurface: '#44475a', 15 | }, 16 | syntax: { 17 | plain: '#f8f8f2', 18 | comment: { 19 | color: '#6272a4', 20 | fontStyle: 'italic', 21 | }, 22 | keyword: '#ff79c6', 23 | tag: '#ff79c6', 24 | punctuation: '#ff79c6', 25 | definition: '#f8f8f2', 26 | property: '#50fa7b', 27 | static: '#bd93f9', 28 | string: '#f1fa8c', 29 | }, 30 | font: { 31 | 32 | body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', 33 | mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace', 34 | size: '13px', 35 | lineHeight: '20px', 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /docs/src/components/Editor/useContainerClassNameModifier.ts: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | 3 | export const useContainerClassNameModifier = (modifier: string, isActive = true) => 4 | { 5 | useEffect(() => 6 | { 7 | const mainContainer = document.querySelector('main > .container'); 8 | 9 | if (mainContainer === null || !isActive) 10 | { 11 | return; 12 | } 13 | 14 | mainContainer.classList.add(modifier); 15 | 16 | // eslint-disable-next-line consistent-return 17 | return () => 18 | { 19 | mainContainer.classList.remove(modifier); 20 | }; 21 | }, [modifier, isActive]); 22 | }; 23 | -------------------------------------------------------------------------------- /docs/src/css/custom.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600&family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap'); 2 | /** 3 | * Any CSS included here will be global. The classic template 4 | * bundles Infima by default. Infima is a CSS framework designed to 5 | * work well for content-centric websites. 6 | */ 7 | 8 | /* You can override the default Infima variables here. */ 9 | :root { 10 | --ifm-font-family-base: 'Roboto'; 11 | --ifm-color-primary: #e91e63; 12 | --ifm-color-primary-dark: #d81557; 13 | --ifm-color-primary-darker: #cc1452; 14 | --ifm-color-primary-darkest: #a81044; 15 | --ifm-color-primary-light: #eb3674; 16 | --ifm-color-primary-lighter: #ed427c; 17 | --ifm-color-primary-lightest: #f06695; 18 | --ifm-code-font-size: 95%; 19 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); 20 | --ifm-hr-background-color: var(--ifm-color-gray-700); 21 | } 22 | 23 | /* For readability concerns, you should choose a lighter palette in dark mode. */ 24 | /* [data-theme='dark'] { 25 | --ifm-color-primary: #25c2a0; 26 | --ifm-color-primary-dark: #21af90; 27 | --ifm-color-primary-darker: #1fa588; 28 | --ifm-color-primary-darkest: #1a8870; 29 | --ifm-color-primary-light: #29d5b0; 30 | --ifm-color-primary-lighter: #32d8b4; 31 | --ifm-color-primary-lightest: #4fddbf; 32 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); 33 | } */ 34 | 35 | .header-twitter-link::before { 36 | width: 26px; 37 | height: 24px; 38 | background: url('/social/twitter.svg') no-repeat center; 39 | } 40 | 41 | .header-discord-link::before { 42 | width: 30px; 43 | height: 24px; 44 | background: url('/social/discord.svg') no-repeat center; 45 | } 46 | 47 | .header-github-link::before { 48 | width: 24px; 49 | height: 24px; 50 | background: url('/social/github.svg') no-repeat center; 51 | } 52 | 53 | .header-open-col-link::before { 54 | width: 24px; 55 | height: 24px; 56 | background: url('/social/open-col-icon.svg') no-repeat center; 57 | /* set icons to white when dark mode enabled and black when light */ 58 | [data-theme='dark'] &::before { 59 | filter: unset; 60 | } 61 | } 62 | 63 | .header-link { 64 | &::before { 65 | content: ''; 66 | display: flex; 67 | background-size: contain; 68 | } 69 | 70 | /* set icons to white when dark mode enabled and black when light */ 71 | [data-theme='dark'] &::before { 72 | filter: invert(1); 73 | } 74 | 75 | &:hover { 76 | opacity: 0.6; 77 | } 78 | } 79 | 80 | /* hr { 81 | 82 | }5f5f5f */ 83 | -------------------------------------------------------------------------------- /docs/src/examples/basic/App.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Application, 3 | extend, 4 | } from '@pixi/react'; 5 | import { 6 | Container, 7 | Graphics, 8 | Sprite, 9 | } from 'pixi.js'; 10 | 11 | import { BunnySprite } from './BunnySprite' 12 | 13 | // extend tells @pixi/react what Pixi.js components are available 14 | extend({ 15 | Container, 16 | Graphics, 17 | Sprite, 18 | }); 19 | 20 | export default function App() { 21 | return ( 22 | // We'll wrap our components with an component to provide 23 | // the Pixi.js Application context 24 | 25 | 26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /docs/src/examples/basic/BunnySprite.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Assets, 3 | Texture, 4 | } from 'pixi.js'; 5 | import { 6 | useEffect, 7 | useRef, 8 | useState, 9 | } from 'react'; 10 | import { useTick } from '@pixi/react'; 11 | 12 | export function BunnySprite() { 13 | // The Pixi.js `Sprite` 14 | const spriteRef = useRef(null) 15 | 16 | const [texture, setTexture] = useState(Texture.EMPTY) 17 | const [isHovered, setIsHover] = useState(false) 18 | const [isActive, setIsActive] = useState(false) 19 | 20 | // Preload the sprite if it hasn't been loaded yet 21 | useEffect(() => { 22 | if (texture === Texture.EMPTY) { 23 | Assets 24 | .load('https://pixijs.com/assets/bunny.png') 25 | .then((result) => { 26 | setTexture(result) 27 | }); 28 | } 29 | }, [texture]); 30 | 31 | return ( 32 | setIsActive(!isActive)} 37 | onPointerOver={(event) => setIsHover(true)} 38 | onPointerOut={(event) => setIsHover(false)} 39 | scale={isActive ? 1 : 1.5} 40 | texture={texture} 41 | x={100} 42 | y={100} /> 43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /docs/src/pages/CTA.tsx: -------------------------------------------------------------------------------- 1 | import styles from './index.module.css'; 2 | import Link from '@docusaurus/Link'; 3 | 4 | import type React from 'react'; 5 | 6 | export interface CTAOptions 7 | { 8 | label: string; 9 | link: string; 10 | white?: boolean; 11 | outline?: boolean; 12 | style?: React.CSSProperties; 13 | anim?: string; 14 | } 15 | 16 | export default function CTA(opts: CTAOptions): JSX.Element 17 | { 18 | let classNames = styles.button; 19 | 20 | if (opts.anim) 21 | { 22 | classNames += ` ${opts.anim}`; 23 | } 24 | 25 | return ( 26 | 27 |
28 |
29 |
30 | {opts.label} 31 | 41 | 42 | 43 | 44 | 45 | 46 | ); 47 | } 48 | -------------------------------------------------------------------------------- /docs/src/pages/index.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * CSS files with the .module.css suffix will be treated as CSS modules 3 | * and scoped locally. 4 | */ 5 | 6 | .heroBanner { 7 | padding: 4rem 0; 8 | text-align: center; 9 | position: relative; 10 | overflow: hidden; 11 | } 12 | 13 | @media screen and (max-width: 996px) { 14 | .heroBanner { 15 | padding: 2rem; 16 | } 17 | } 18 | 19 | .buttons { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | gap: 2rem; 24 | } 25 | 26 | .button { 27 | --button-color: var(--ifm-color-primary); 28 | --button-hover-color: #c2185b; 29 | width: 208px; 30 | height: 50px; 31 | font-size: 1.1rem; 32 | font-weight: 500; 33 | background: var(--button-color); 34 | color: #fff; 35 | position: relative; 36 | text-align: center; 37 | cursor: pointer; 38 | border-radius: 0.5rem; 39 | border: 0; 40 | text-transform: uppercase; 41 | padding: 0.9rem 1.5rem; 42 | margin: 13px 13px 12px 12px; 43 | transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); 44 | } 45 | 46 | .button::before { 47 | content: ''; 48 | position: absolute; 49 | z-index: 1; 50 | left: 0; 51 | top: 0; 52 | width: 0; 53 | height: 100%; 54 | border-radius: inherit; 55 | background: var(--button-hover-color); 56 | display: block; 57 | transition: width 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); 58 | } 59 | 60 | .button .buttonShadow { 61 | width: 100%; 62 | height: 100%; 63 | position: absolute; 64 | top: 0; 65 | left: 0; 66 | } 67 | 68 | .button .buttonShadow > div { 69 | position: absolute; 70 | width: 100%; 71 | height: 100%; 72 | border-radius: 0.6rem; 73 | border: 2px solid var(--button-color); 74 | border-top: none; 75 | border-left: none; 76 | right: -6px; 77 | bottom: -6px; 78 | } 79 | 80 | .button:hover { 81 | transform: translateX(2px) translateY(2px) !important; 82 | color: #fff; 83 | text-decoration: none; 84 | } 85 | 86 | .button:hover::before { 87 | width: 100%; 88 | } 89 | 90 | .button:hover .buttonShadow > div { 91 | right: -4px; 92 | bottom: -4px; 93 | } 94 | 95 | .button:hover svg { 96 | transform: translateX(4px); 97 | } 98 | 99 | .button span { 100 | position: relative; 101 | z-index: 2; 102 | vertical-align: middle; 103 | } 104 | 105 | .button svg { 106 | display: inline-block; 107 | vertical-align: middle; 108 | width: 23px; 109 | height: 14px; 110 | margin-left: 30px; 111 | margin-top: 0; 112 | top: auto; 113 | right: auto; 114 | position: relative; 115 | z-index: 2; 116 | transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); 117 | } 118 | 119 | .button svg line { 120 | stroke: #fff; 121 | stroke-width: 2px; 122 | } 123 | -------------------------------------------------------------------------------- /docs/src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import clsx from 'clsx'; 2 | import CTA from './CTA'; 3 | import styles from './index.module.css'; 4 | import ExampleApp from '!!raw-loader!../examples/basic/App'; 5 | import ExampleBunnySprite from '!!raw-loader!../examples/basic/BunnySprite'; 6 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; 7 | import { EmbeddedEditor } from '@site/src/components/Editor/EmbeddedEditor'; 8 | import Heading from '@theme/Heading'; 9 | import Layout from '@theme/Layout'; 10 | 11 | function HomepageHeader() 12 | { 13 | const { siteConfig } = useDocusaurusContext(); 14 | 15 | return ( 16 |
17 |
18 | 19 | Logo 20 | 21 |

22 | {siteConfig.tagline} 23 |

24 |
25 |
26 | ); 27 | } 28 | 29 | export default function Home(): JSX.Element 30 | { 31 | const { siteConfig } = useDocusaurusContext(); 32 | 33 | return ( 34 | 35 | 36 |
44 |
51 |
59 | 66 |
67 | 68 |
69 |
70 | 71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /docs/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.md'; 2 | declare module '!!raw-loader!.*'; 3 | -------------------------------------------------------------------------------- /docs/static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/.nojekyll -------------------------------------------------------------------------------- /docs/static/CNAME: -------------------------------------------------------------------------------- 1 | react.pixijs.io 2 | -------------------------------------------------------------------------------- /docs/static/img/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/img/demo.gif -------------------------------------------------------------------------------- /docs/static/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/img/favicon.png -------------------------------------------------------------------------------- /docs/static/img/ogimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/img/ogimage.png -------------------------------------------------------------------------------- /docs/static/social/discord.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/static/social/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/static/social/open-col-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/static/social/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | -------------------------------------------------------------------------------- /docs/static/v7/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/code.png -------------------------------------------------------------------------------- /docs/static/v7/font/desyrel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/font/desyrel.png -------------------------------------------------------------------------------- /docs/static/v7/img/bunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/img/bunny.png -------------------------------------------------------------------------------- /docs/static/v7/img/coin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/img/coin.png -------------------------------------------------------------------------------- /docs/static/v7/img/docusaurus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/img/docusaurus.png -------------------------------------------------------------------------------- /docs/static/v7/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/img/favicon.png -------------------------------------------------------------------------------- /docs/static/v7/img/mesh-placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/img/mesh-placeholder.png -------------------------------------------------------------------------------- /docs/static/v7/img/pixi-legacy-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/img/pixi-legacy-banner.png -------------------------------------------------------------------------------- /docs/static/v7/img/pixi-react-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/img/pixi-react-example.png -------------------------------------------------------------------------------- /docs/static/v7/img/pixi-react-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/img/pixi-react-logo.png -------------------------------------------------------------------------------- /docs/static/v7/img/pixi-react-rainbow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/img/pixi-react-rainbow.png -------------------------------------------------------------------------------- /docs/static/v7/img/pixi-v7-canvas-hello.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/img/pixi-v7-canvas-hello.png -------------------------------------------------------------------------------- /docs/static/v7/img/snake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/img/snake.png -------------------------------------------------------------------------------- /docs/static/v7/img/speech-bubble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/img/speech-bubble.png -------------------------------------------------------------------------------- /docs/static/v7/img/tile.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/img/tile.jpeg -------------------------------------------------------------------------------- /docs/static/v7/img/typescript-custom-components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/img/typescript-custom-components.png -------------------------------------------------------------------------------- /docs/static/v7/img/typescript-support.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pixijs/pixi-react/413d1d90fc61c105d7b7e83534ad3608176bc690/docs/static/v7/img/typescript-support.png -------------------------------------------------------------------------------- /docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@docusaurus/tsconfig", 3 | "compilerOptions": { 4 | "baseUrl": "." 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-7.x/about.jsx: -------------------------------------------------------------------------------- 1 | import React, { useMemo } from 'react'; 2 | import { Container, Sprite, Stage, Text } from '@pixi/react'; 3 | import { BlurFilter, TextStyle } from 'pixi.js'; 4 | 5 | export default function App() { 6 | const blurFilter = useMemo(() => new BlurFilter(2), []); 7 | const bunnyUrl = 'https://react.pixijs.io/img/bunny.png'; 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | 15 | 33 | 34 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /docs/versioned_docs/version-7.x/components/AnimatedSprite.mdx: -------------------------------------------------------------------------------- 1 | import { EmbeddedEditor } from "@site/src/components/Editor/EmbeddedEditor"; 2 | import IndexFile from '!!raw-loader!./AnimatedSprite/index'; 3 | import makeAnimatedSpriteTexturesFile from '!!raw-loader!./AnimatedSprite/makeAnimatedSpriteTextures'; 4 | 5 | # AnimatedSprite 6 | 7 | 8 | ## Props 9 | 10 | https://pixijs.download/v7.x/docs/PIXI.AnimatedSprite.html 11 | 12 | ### Additional Props 13 | 14 | | Prop | Default Value | Description | 15 | | ---------------------- | ------------- | ----------------------------------------------------- | 16 | | textures `array` | | Generate the animated sprite from the textures | 17 | | images `array` | | Generate the animated sprite directly from the images | 18 | | isPlaying `boolean` | true | whether the animation starts automatically | 19 | | initialFrame `integer` | 0 | Which frame the animation starts from | 20 | 21 | ## Usage 22 | 23 | 24 | 25 | ## Example 26 | 27 |