@d2api/manifest-react

a simple singleton with functions to download, ✨CACHE✨, and access the d2 manifest, with proper component types

this package downloads the manifest and provides functions to retrieve its data. it caches the fetched tables in IndexedDB, for faster loads later.

these functions will return accurately typed entries from bungie-api-ts.

functions/exports

react

ensureManifest this can manually act as a suspense hook that stops a component from rendering until definitions are loaded.
wrap the component in React.Suspense and the component calling ensureManifest() will cause a suspense fallback

setup

setApiKey('apikey')
you should add an api key or you are really likely to have CORS problems.

setLanguage('en')
sets the language of the manifest to download. doing this alone doesn't trigger a fresh download, you need to loadDefs() afterward.

verbose()
run this if you love console logs. run empty to turn on verbosity, or with a boolean for on/off.

includeTables(['InventoryItem', 'Activity'])
specify which definitions tables should be downloaded and available. you can leave this empty to fetch everything, but do you really need several MB worth of UnlockValues?
see loadDefs below for an extra note.

excludeTables(['UnlockValues', 'InventoryItemLite'])
if you realllly want everything, you can specify which definitions tables should be excluded, and download everything else.
prefer using includeTables, but if you're downloading everything, this is a good place to put InventoryItemLite since you'll already have InventoryItem

loadDefs()
loads the newest manifest according to what version the API advertises. attempts to use the cached copy if it's up to date. returns a promise that resolves once loading is complete.
THIS CAN BE RE-RUN

• to download additional data after adding more components with includeTables
• to check for manifest version updates
• to switch to a new language

lookups

getActivityDef('2656947700')
performs a lookup of a known activity hash. this example returns the type DestinyActivityDefinition | undefined, because the hash might not be valid.
optional chaining will serve you well here, or you can live dangerously with a non-null assertion!

getDef('Activity', 2656947700)
a more generic def getter, which accepts table names as string literals. this returns the same data as the above example.

getInventoryItemDef(2575506895) / getDamageTypeDef(3373582085)
same as getActivity, but for other tables/data types. there's 50+ of these functions, not going to list them all here, that's what intellisense is for.

getAllDefs('Activity') / getAllActivityDefs()
returns an array of all the values in a manifest component, such as, in this example, a list of every DestinyActivityDefinition

getComponent('InventoryItem')
like getAllDefs but returns the whole lookup table object, keyed by hashes

allManifest
an object containing all manifest components which have been fetched

misc exports

loadedVersion
the manifest version currently loaded in memory. the version that you'll get information from if you getDef() an entry

defLanguages
a list of available manifest languages

examples

basic usage

import { DefinitionsProvider,verbose, setApiKey, loadDefs, getInventoryItemLiteDef, getAllInventoryItemLiteDefs, includeTables } from '@d2api/manifest-react';
verbose(); // make the client chatty. if you want.
setApiKey('hahahoho');
includeTables(['InventoryItemLite']);

// we're not awaiting this promise, just dispatching it to do its thing, while react builds the page
loadDefs();

function App() {
  const fallback = <b>hi, definitions are loading...</b>;

  return (
    <>
      <h2>you can see this header immediately on the page</h2>
      <DefinitionsProvider fallback={fallback}>
        <h2>you can see this header once the definitions load</h2>
        the name of the item with hash 2575506895 is {getInventoryItemLiteDef(2575506895)!.displayProperties.name}
        <br/>
        here's every single item in the game:
        <ul>
        {getAllInventoryItemLiteDefs().map(i=><li>{i.displayProperties.name}</li>)}
        </ul>
      </DefinitionsProvider>
    </>
  )
}

slightly more complex

a react component for "displaying an item", should not need to individually check whether defs are ready yet, nor keep track of global def readiness state.

DefinitionsProvider as an ancestor provides all the safety required, and descendant components can simply use def-getting functions without worrying about readiness

import { DefinitionsProvider, verbose, setApiKey, loadDefs, getInventoryItemDef, getDamageTypeDef, includeTables } from '@d2api/manifest-react';
setApiKey('hahahoho');
includeTables(['InventoryItem', 'DamageType']);
loadDefs();

function App() {
  const fallback = <b>hi, definitions are loading...</b>;

  return (
    <DefinitionsProvider fallback={fallback}>
      <D2Item itemHash={2575506895}/>
    </DefinitionsProvider>
  )
}

// as long as there is a DefinitionsProvider upstream of this, we get to use definition lookups freely
function D2Item({ itemHash }: { itemHash: number }) {
  const itemDef = getInventoryItemDef(itemHash)!;
  const {name, icon, description} = itemDef.displayProperties;
  const thisItemDamageType = getDamageTypeDef(itemDef.defaultDamageTypeHash)!;
  return (
    <>
    you selected:<br/>
      <img height={32} width={32} src={"https://www.bungie.net" + icon} /> {name}
      <p>damage type: {thisItemDamageType.displayProperties.name}</p>
      <p>{description}</p>
    </>
  );
}