> For the complete documentation index, see [llms.txt](https://docs.exile.watch/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exile.watch/projects/nucleus/exile-watch-encounter-data.md).

# @exile-watch/encounter-data

## About [`@exile-watch/encounter-data`](https://github.com/exile-watch/nucleus/tree/main/packages/encounter-data)

This package contains JSONs that power exile.watch.

This is ES module package only.

JSONs are generated based on the extracted YAML tokens. ([more on the process here](/projects/nucleus/contributing-scripts/scripts-definition.md))

## Usage

{% hint style="info" %}
The size of generated JSONs can be big (double digit kb)

It's advised to dynamically import them when needed in order to boost performance
{% endhint %}

1. Install the package as a `dependency`:

```bash
npm i @exile-watch/encounter-data
```

***

2. Example of dynamically importing the data

<pre class="language-tsx"><code class="lang-tsx"><strong>// ListEncounterCategories.tsx
</strong><strong>import { CategoryPageType } from "@exile-watch/encounter-data";
</strong>import { SimpleGrid } from "@exile-watch/writ-react";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { HomepageCard, SimpleCard } from "#components";

const ListEncounterCategories = () => {
  const {
    query: { directory, category },
  } = useRouter();
  const [data, setData] = useState&#x3C;CategoryPageType | null>(null);

  useEffect(() => {
    import(
      `@exile-watch/encounter-data/dist/extracted-data/${directory}/${category}.esm` as string
    )
      .then((d) => {
        setData(d.default);
      })
      .catch(() => {
        setData(null);
      });
  }, [category]);

  return (
    &#x3C;SimpleGrid
      cols={{ xxxl: 6, xxl: 5, xl: 4, lg: 3, md: 2, sm: 2, xs: 1 }}
      mb="md"
    >
      {data?.map((data) => (
        &#x3C;HomepageCard key={data.path} {...data} />
      ))}
    &#x3C;/SimpleGrid>
  );
};

export default ListEncounterCategories;

</code></pre>