diff --git a/README.md b/README.md index 0860493d..4b3ca335 100644 --- a/README.md +++ b/README.md @@ -270,22 +270,36 @@ const ParentComponent = () => ( #### `useAsset` -The `useAsset` hook wraps the functionality of [Pixi's Asset loader](https://pixijs.download/release/docs/assets.Assets.html) and cache into a convenient React hook. The hook can accept either an [`UnresolvedAsset`](https://pixijs.download/release/docs/assets.html#UnresolvedAsset) or a url. +**DEPRECATED.** Use `useAssets` of `useSuspenseAssets` instead. + +#### `useAssets` + +The `useAssets` hook wraps the functionality of [Pixi's Asset loader](https://pixijs.download/release/docs/assets.Assets.html) and [Cache](https://pixijs.download/release/docs/assets.Cache.html) into a convenient React hook. The hook can accept an array of items which are either an [`UnresolvedAsset`](https://pixijs.download/release/docs/assets.html#UnresolvedAsset) or a url. ```jsx -import { useAsset } from '@pixi/react' +import { useAssets } from '@pixi/react' const MyComponent = () => { - const bunnyTexture = useAsset('https://pixijs.com/assets/bunny.png') - const bunnyTexture2 = useAsset({ - alias: 'bunny', - src: 'https://pixijs.com/assets/bunny.png', - }) + const { + assets: [ + bunnyTexture1, + bunnyTexture2, + ], + isSuccess, + } = useAssets([ + 'https://pixijs.com/assets/bunny.png', + { + alias: 'bunny', + src: 'https://pixijs.com/assets/bunny.png', + } + ]) return ( - - + {isSuccess && ( + + + )} ) } @@ -293,26 +307,27 @@ const MyComponent = () => { ##### Tracking Progress -`useAsset` can optionally accept a [`ProgressCallback`](https://pixijs.download/release/docs/assets.html#ProgressCallback) as a second argument. This callback will be called by the asset loader as the asset is loaded. +`useAssets` can optionally accept a [`ProgressCallback`](https://pixijs.download/release/docs/assets.html#ProgressCallback) as a second argument. This callback will be called by the asset loader as the asset is loaded. ```jsx -const bunnyTexture = useAsset('https://pixijs.com/assets/bunny.png', progress => { +const bunnyTexture = useAssets('https://pixijs.com/assets/bunny.png', progress => { console.log(`We have achieved ${progress * 100}% bunny.`) }) ``` -> [!TIP] -> The `useAsset` hook also supports [React Suspense](https://react.dev/reference/react/Suspense)! If given a suspense boundary, it's possible to prevent components from rendering until they've finished loading their assets: +#### `useSuspenseAssets` + +`useSuspenseAssets` is similar to the `useAssets` hook, except that it supports [React Suspense](https://react.dev/reference/react/Suspense). `useSuspenseAssets` accepts the same parameters as `useAssets`, but it only returns an array of the loaded assets. This is because given a suspense boundary it's possible to prevent components from rendering until they've finished loading their assets. > ```jsx > import { > Application, -> useAsset, +> useSuspenseAssets, > } from '@pixi/react' > -> import { Suspense } from 'react'; +> import { Suspense } from 'react' > > const BunnySprite = () => { -> const bunnyTexture = useAsset('https://pixijs.com/assets/bunny.png') +> const [bunnyTexture] = useSuspenseAssets(['https://pixijs.com/assets/bunny.png']) > > return ( >