# @dswistowski/destiny-manifest-react

> This package contains helper to use destiny manifest in frontend typescript react application.

Latest version **0.0.3** (published 2022-10-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dswistowski/destiny-manifest-react
pnpm add @dswistowski/destiny-manifest-react
yarn add @dswistowski/destiny-manifest-react
bun add @dswistowski/destiny-manifest-react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-10-19 |
| First published | 2022-10-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 2.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | dswistowski |

## Links

- npm: https://www.npmjs.com/package/@dswistowski/destiny-manifest-react
- npm.io page: https://npm.io/package/@dswistowski/destiny-manifest-react

## Dependencies (2)

- [react](https://npm.io/package/react.md) >=17.2.0 <19.0.0
- [@dswistowski/destiny-manifest](https://npm.io/package/@dswistowski/destiny-manifest.md) 0.0.3

## Recent versions

- 0.0.3 (latest) — 2022-10-19
- 0.0.2 — 2022-10-16
- 0.0.1 — 2022-10-15

## README

# Destiny manifest react

This package contains helper to use destiny manifest in frontend typescript react application.

## Installation

```bash
npm add @dswistowski/destiny-manifest-react
```

## Usage

1. Create manifest module with loader:

```typescript
import {
  createDefaultManifest,
  createLoader,
  inferDomains,
} from "@dswistowski/destiny-manifest-react";

const loader = createLoader()
  .add("DestinyLoreDefinition", ({ hash, displayProperties, index }) => ({
    hash,
    displayProperties,
    index,
  }))
  .add(
    "DestinyInventoryItemDefinition",
    ({ hash, displayProperties, loreHash }) => ({
      hash,
      displayProperties,
    })
  );

export const manifest = createDefaultManifest({
  loader,
  apiKey: process.env.REACT_APP_BUNGIE_API_KEY,
  language: "en",
});

export type Domains = inferDomains<typeof loader>;
```

And then use it in your application:

```tsx
import { manifest, Domains } from "./manifest";

const LoreDefinition: React.FC<{ lore: Domains["DestinyLoreDefinition"] }> = ({
  lore,
}) => {
  return (
    <div>
      <h1>{lore.displayProperties.name}</h1>
      <p>{lore.displayProperties.description}</p>
    </div>
  );
};

const ItemDefinition: React.FC<{
  item: Domains["DestinyInventoryItemDefinition"];
}> = ({ item }) => {
  const lore = manifest.useDestinyLoreDefinition(item.loreHash);
  return (
    <div>
      <h1>{item.displayProperties.name}</h1>
      <p>{item.displayProperties.description}</p>
      {lore && <LoreDefinition lore={lore} />}
    </div>
  );
};

const Items: React.FC = () => {
  const items = manifest.useDestinyInventoryItemDefinitions(() => true);
  return (
    <div>
      {items.map((item) => (
        <ItemDefinition key={item.hash} item={item} />
      ))}
    </div>
  );
};
```

---
_Source: https://npm.io/package/@dswistowski/destiny-manifest-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._