### Install and Run Next.js App

Source: https://github.com/reearth/resium/blob/main/examples/next/README.md

Install dependencies, which includes a postinstall script to link Cesium assets, and then start the development server.

```bash
yarn install
yarn dev
```

--------------------------------

### Local Development Setup

Source: https://github.com/reearth/resium/blob/main/docs/README.md

Generate component docs and start the development server. Run these commands from the repository root.

```console
yarn docs:generate
yarn docs
```

--------------------------------

### Install Dependencies

Source: https://github.com/reearth/resium/blob/main/docs/README.md

Install project dependencies. Run this command from the 'docs/' directory.

```console
yarn install
```

--------------------------------

### Install Playwright and Build Storybook for VRT

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/contribution.md

Installs Playwright dependencies and builds the Storybook for Visual Regression Testing. Run this on the first-time setup.

```bash
yarn playwright install chromium   # first time only
yarn storybook:build:vrt           # build Storybook
```

--------------------------------

### Install Cesium and Resium

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Install Cesium and Resium using npm or yarn.

```bash
npm install --save cesium resium
# OR
yarn add cesium resium
```

--------------------------------

### Next.js App Router: Install Dependencies

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Install dependencies for a Next.js project.

```bash
npm install
# OR
yarn
```

--------------------------------

### Install Vite Plugin Cesium

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Install Cesium, Resium, and vite-plugin-cesium for Vite projects.

```bash
npm install --save cesium resium
npm install --save-dev vite-plugin-cesium
# OR
yarn add cesium resium
yarn add --dev vite-plugin-cesium
```

--------------------------------

### Install Webpack Plugins for Cesium (Option A)

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Installs necessary webpack plugins for copying Cesium files and managing HTML assets. Use this for Option A.

```bash
npm install --save-dev copy-webpack-plugin html-webpack-plugin html-webpack-tags-plugin
# OR
yarn add copy-webpack-plugin html-webpack-plugin html-webpack-tags-plugin
```

--------------------------------

### Build Documentation Site

Source: https://github.com/reearth/resium/blob/main/docs/README.md

Produce the full documentation site, including library build, API docs, and Storybook examples. The static output is written to 'docs/dist/'.

```console
yarn docs:build
```

--------------------------------

### Install Cesium Packages

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Install the required Cesium packages for Resium. Use the engine-only option if you are not using the Viewer component.

```bash
# with <Viewer>
npm install --save @cesium/engine @cesium/widgets resium
# engine-only (use <CesiumWidget> instead of <Viewer>)
npm install --save @cesium/engine resium
```

--------------------------------

### Install Webpack Plugins and Loaders for Cesium Assets (Option B)

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Installs necessary webpack plugins and loaders for bundling Cesium assets. Use this for Option B.

```bash
npm install --save-dev html-webpack-plugin copy-webpack-plugin css-loader style-loader url-loader
# OR
yarn add --dev html-webpack-plugin copy-webpack-plugin css-loader style-loader url-loader
```

--------------------------------

### Import Cesium

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Import the Cartesian3 class from Cesium after installation.

```javascript
import { Cartesian3 } from "cesium";
```

--------------------------------

### Display Entity with PointGraphics

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/getting-started.md

Render an entity on the Cesium map with a PointGraphics visualization. This example shows how to define the entity's position and point properties.

```jsx
import { Viewer, Entity } from "resium";
import { Cartesian3 } from "cesium";

const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);
const pointGraphics = { pixelSize: 10 };

function App() {
  return (
    <Viewer full>
      <Entity position={position} point={pointGraphics} />
    </Viewer>
  );
}

export default App;
```

--------------------------------

### Re-export Modular Cesium Packages

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Create a module to re-export from @cesium/engine and @cesium/widgets. Omit the @cesium/widgets export for an engine-only setup.

```typescript
export * from "@cesium/engine";
export * from "@cesium/widgets"; // omit this line for an engine-only (no <Viewer>) setup
```

--------------------------------

### ImageryLayer with Reinitializing Provider

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/guide.md

Example of an ImageryLayer component where the imageryProvider is re-created on every render, causing the layer to reinitialize. This is generally not recommended.

```jsx
const Example = () => (
  <Viewer>
    <ImageryLayer
      imageryProvider={
        new ArcGisMapServerImageryProvider({
          url: "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
        })
      }
    />
  </Viewer>
);
```

--------------------------------

### Add Read-Only Property to Viewer Component

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/contribution.md

Example of adding a new read-only property named 'test' to the Viewer component.

```typescript
const cesiumReadonlyProps = [
  // ...
  "test", // <== Add a new property name
];
```

--------------------------------

### Add Variable Property to Viewer Component

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/contribution.md

Example of adding a new variable property named 'test' to the Viewer component's Cesium properties.

```typescript
const cesiumProps = [
  // ...
  "test", // <== Add a new property name
] as const;
```

--------------------------------

### Add Event Property to Viewer Component

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/contribution.md

Example of adding a new event property 'onTest' to the Viewer component's event props and mapping it to the Cesium event name.

```typescript
export type ViewerEventProps = {
  // ...
  onTest?: () => void; // <=== Add a new property type
};

export const cesiumEventProps: EventKeyMap<Viewer, ViewerProps> = {
  onTest: "test", // <== Add a new property name mapping
};
```

--------------------------------

### Access Cesium Objects with useCesium Hook

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/guide.md

Use the `useCesium` hook within a component rendered inside a Resium `Viewer` to access Cesium's viewer, scene, and camera objects. Ensure the hook is called in a child component, not the direct parent of `<Viewer>`, to get defined values.

```jsx
import { Viewer, useCesium } from "resium";

const Inner = () => {
  const { viewer, scene, camera } = useCesium();
  // `viewer` is Cesium's Viewer, available because this runs inside <Viewer>.
  // DO SOMETHING
  return null;
};

const ExampleComponent = () => (
  <Viewer>
    <Inner />
  </Viewer>
);
```

--------------------------------

### Accessing Cesium Element with useRef (Function Component)

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/guide.md

Use the `useRef` hook in function components to get a ref to the Resium component. Access the raw Cesium element via `ref.current.cesiumElement` within `useEffect` to ensure it's initialized.

```jsx
import { useEffect, useRef } from "react";
import { Viewer } from "resium";

const ExampleComponent = () => {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current && ref.current.cesiumElement) {
      // ref.current.cesiumElement is Cesium's Viewer
      // DO SOMETHING
    }
  }, []);

  return <Viewer ref={ref} />;
```

--------------------------------

### Create Vite Project

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Create a new Vite project with the React template.

```bash
npm create vite@latest example -- --template react
# OR
yarn create vite example --template react
```

--------------------------------

### ImageryLayer with useMemo for Variable Provider

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/guide.md

Demonstrates using the useMemo hook for a variable imageryProvider in an ImageryLayer component. This ensures the provider is only re-created when its dependencies change, optimizing performance.

```javascript
import { useMemo } from "react";
import { Viewer, ImageryLayer } from "resium";
import { ArcGisMapServerImageryProvider } from "cesium";

const ExampleComponent = ({ url }) => {
  const imageryProvider = useMemo(
    () => new ArcGisMapServerImageryProvider({ url }),
    [url],
  );

  return (
    <Viewer>
      <ImageryLayer imageryProvider={imageryProvider} />
    </Viewer>
  );
};

```

--------------------------------

### Generate API Docs

Source: https://github.com/reearth/resium/blob/main/docs/README.md

Regenerate component reference pages from TypeScript source annotations. This command should be run from the repository root.

```console
yarn docs:generate
```

--------------------------------

### Run Visual Regression Tests

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/contribution.md

Commands to update local baselines and compare against them for Visual Regression Testing.

```bash
yarn vrt:update                    # create local baselines
yarn vrt                           # compare against them
```

--------------------------------

### Simplest Resium Application

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/getting-started.md

Create a basic React application that renders a Cesium viewer. The Viewer component is the root component in Resium, similar to Cesium's root object.

```jsx
import { Viewer } from "resium";

function App() {
  return <Viewer />;
}

export default App;
```

```jsx
import ReactDOM from "react-dom/client";
import App from "./app";

const root = ReactDOM.createRoot(document.getElementById("wrapper"));
root.render(<App />);
```

--------------------------------

### Next.js App Router: Copy Cesium Assets

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Add a postinstall script to package.json to copy Cesium's static assets to the public directory for Next.js App Router.

```json
{
  "scripts": {
    "postinstall": "node -e \"require('fs').cpSync('node_modules/cesium/Build/Cesium','public/cesium',{recursive:true})\""
  }
}
```

--------------------------------

### Recommended Component Hierarchy

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/guide.md

Presents a recommended shallow component structure for Viewer, Scene, Camera, and Entity, promoting efficient rendering.

```jsx
// recomended
<Viewer>
  <Scene />
  <Camera />
  <Entity />
</Viewer>
```

--------------------------------

### Basic Cesium Viewer with Entity

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/index.mdx

This snippet demonstrates how to create a Cesium viewer with a single entity. Ensure you have the necessary Cesium and Resium imports.

```jsx
<Viewer full>
  <Entity
    name="tokyo"
    description="test"
    position={Cartesian3.fromDegrees(139.767052, 35.681167, 100)}
  />
</Viewer>
```

--------------------------------

### Configure Vite for Cesium

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Configure vite.config.js to use the vite-plugin-cesium.

```javascript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import cesium from "vite-plugin-cesium";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), cesium()],
});
```

--------------------------------

### Next.js App Router: Client-Only Cesium Component

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Create a client component for Cesium, import its CSS, and set CESIUM_BASE_URL.

```jsx
"use client";

import "cesium/Build/Cesium/Widgets/widgets.css";
import { Viewer } from "resium";

// Cesium loads its workers/assets relative to this URL (copied to /public/cesium above).
window.CESIUM_BASE_URL = "/cesium";

export default function Cesium() {
  return <Viewer full />;
}
```

--------------------------------

### Load 3D Tileset

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/getting-started.md

Display 3D Tilesets using the Cesium3DTileset component. The onReady prop can be used to interact with the tileset once it's loaded, such as zooming to it.

```jsx
import { Viewer, Cesium3DTileset } from "resium";
import { IonResource } from "cesium";

function App() {
  let viewer; // This will be raw Cesium's Viewer object.

  const handleReady = (tileset) => {
    if (viewer) {
      viewer.zoomTo(tileset);
    }
  };

  return (
    <Viewer
      full
      ref={(e) => {
        viewer = e && e.cesiumElement;
      }}
    >
      <Cesium3DTileset
        url={IonResource.fromAssetId(5714)}
        onReady={handleReady}
      />
    </Viewer>
  );
}

export default App;
```

--------------------------------

### Basic Cesium Viewer with Entity

Source: https://github.com/reearth/resium/blob/main/README.md

This snippet shows how to create a Cesium viewer and add an entity with a description, name, point visualization, and position. It requires Cesium and Resium components.

```jsx
<Viewer full>
  <Entity
    description="test"
    name="tokyo"
    point={{ pixelSize: 10 }}
    position={Cartesian3.fromDegrees(139.767052, 35.681167, 100)}
  />
</Viewer>
```

--------------------------------

### Replace onMount/onUpdate/onUnmount with ref Prop

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/migration.md

The `onMount`, `onUpdate`, and `onUnmount` props are deprecated. Use the `ref` prop instead to access the component's instance and lifecycle methods.

```jsx
const Component = () => (
  <Viewer
    onMount={(viewer) => {
      // some code
    }}
  />
);
```

```jsx
class Component extends React.PureComponent {
  ref = React.createRef();

  componentDidMount() {
    if (ref.current) {
      const viewer = ref.current.cesiumElement;
      // some code
    }
  }

  render() {
    return (
      <Viewer ref={this.ref} />
    );
  }
);
```

--------------------------------

### Load Widgets CSS

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Import the widgets CSS file in your application's entry point if you are using the Viewer component.

```typescript
import "@cesium/widgets/Source/widgets.css";
```

--------------------------------

### ImageryLayer with Constant Provider

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/guide.md

Recommended approach for ImageryLayer when the imageryProvider is constant. The provider is created once and reused, avoiding reinitialization.

```javascript
import { Viewer, ImageryLayer } from "resium";
import { ArcGisMapServerImageryProvider } from "cesium";

const imageryProvider = new ArcGisMapServerImageryProvider({
  url: "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
});

const ExampleComponent = () => (
  <Viewer>
    <ImageryLayer imageryProvider={imageryProvider} />
  </Viewer>
);
```

--------------------------------

### Next.js App Router: Ignore Cesium Assets in Git

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Add the copied Cesium assets directory to .gitignore.

```text
/public/cesium
```

--------------------------------

### Make Viewer Full Screen

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/getting-started.md

Use the `full` prop on the Viewer component to make it occupy the entire screen. This is the easiest way to ensure the viewer has dimensions.

```jsx
<Viewer full />
```

--------------------------------

### Vite Configuration for Cesium Assets

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Configure Vite to alias 'cesium' and copy Cesium's static assets using vite-plugin-static-copy. Set CESIUM_BASE_URL to define where assets are served from.

```typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { viteStaticCopy } from "vite-plugin-static-copy";

export default defineConfig({
  define: {
    // where the copied assets are served from
    CESIUM_BASE_URL: JSON.stringify("/cesium"),
  },
  resolve: {
    alias: { cesium: "/src/cesium.ts" },
  },
  plugins: [
    react(),
    viteStaticCopy({
      targets: [
        { src: "node_modules/@cesium/engine/Build/Workers", dest: "cesium" },
        { src: "node_modules/@cesium/engine/Build/ThirdParty", dest: "cesium" },
        { src: "node_modules/@cesium/engine/Source/Assets", dest: "cesium" },
      ],
    }),
  ],
});
```

--------------------------------

### Add Webpack Plugins for Copying Cesium Files (Option A)

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Configures webpack plugins to copy Cesium build files and link them in the HTML. This is for Option A.

```javascript
const webpack = require("webpack");
const HtmlPlugin = require("html-webpack-plugin");
const HtmlTagsPlugin = require("html-webpack-tags-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
```

```javascript
{
  plugins: [
    // ...
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "node_modules/cesium/Build/Cesium",
          to: "cesium",
        },
      ],
    }),
    new HtmlPlugin({
      template: "index.html",
    }),
    new HtmlTagsPlugin({
      append: false,
      tags: ["cesium/Widgets/widgets.css", "cesium/Cesium.js"],
    }),
    new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify("/cesium"),
    }),
  ];
}
```

--------------------------------

### Import Resium Viewer Component

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/getting-started.md

Import the Viewer component from the resium library to use it in your React application.

```jsx
import { Viewer } from "resium";
```

--------------------------------

### Entity Component within Viewer

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/guide.md

Demonstrates mounting an Entity component directly under a Viewer component, which adds the entity to the Viewer's entities collection.

```jsx
<Viewer>
  <Entity />
</Viewer>
```

```javascript
const viewer = new Cesium.Viewer();
const entity = new Cesium.Entity();

viewer.entities.add(entity);
```

--------------------------------

### Load CSS in HTML for Webpack (Option B)

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Provides the HTML tag to link the Cesium CSS file. This is for Option B.

```html
<link rel="stylesheet" href="/Widgets/widgets.css" />
```

--------------------------------

### Next.js Pages Router: Import Widgets CSS

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Import Cesium widgets CSS in the _app.js file for Next.js Pages Router.

```jsx
import "cesium/Build/Cesium/Widgets/widgets.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
```

--------------------------------

### Add Loaders and CSS Import for Webpack (Option B)

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Configures webpack module rules for JS, CSS, and assets, and specifies how to load CSS in the entry JS file. This is for Option B.

```javascript
{
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
        use: ["url-loader"],
      },
    ];
  }
}
```

--------------------------------

### Non-Recommended Component Hierarchy

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/guide.md

Illustrates a discouraged component structure where Scene, Camera, and Entity are deeply nested, potentially leading to extra rendering.

```jsx
// not recomended
<Viewer>
  <Scene>
    <Camera>
      <Entity />
    </Camera>
  </Scene>
</Viewer>
```

--------------------------------

### Webpack Configuration for Cesium Assets

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Configure webpack to alias 'cesium' and copy Cesium's static assets using copy-webpack-plugin. Define CESIUM_BASE_URL using DefinePlugin.

```javascript
const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  resolve: {
    alias: { cesium: path.resolve(__dirname, "src/cesium.ts") },
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: "node_modules/@cesium/engine/Build/Workers", to: "cesium/Workers" },
        { from: "node_modules/@cesium/engine/Build/ThirdParty", to: "cesium/ThirdParty" },
        { from: "node_modules/@cesium/engine/Source/Assets", to: "cesium/Assets" },
      ],
    }),
    new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify("/cesium"),
    }),
  ],
};
```

--------------------------------

### Replace EntityStaticDescription with EntityDescription

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/migration.md

EntityStaticDescription is removed. Use EntityDescription component or the `description` prop of the Entity component instead.

```jsx
<>
  <EntityDescritpion>
    <p>Hello</p>
  </EntityDescritpion>
  <Entity description="<p>hello</p>">
</>
```

--------------------------------

### Next.js Pages Router: Client-Only Cesium Component

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Create a client-only Cesium component and set window.CESIUM_BASE_URL for Next.js Pages Router.

```jsx
import { Viewer } from "resium";

window.CESIUM_BASE_URL = "/cesium";

export default function Cesium() {
  return <Viewer full />;
}
```

--------------------------------

### Display Entity with PointGraphics Component

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/getting-started.md

An alternative way to display an entity with PointGraphics using a dedicated component. This approach allows for easier updating of graphic properties.

```jsx
import { Viewer, Entity, PointGraphics } from "resium";
import { Cartesian3 } from "cesium";

const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);

function App() {
  return (
    <Viewer full>
      <Entity position={position}>
        <PointGraphics pixelSize={10} />
      </Entity>
    </Viewer>
  );
}

export default App;
```

--------------------------------

### Render Rich Entity Description with JSX

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/getting-started.md

Utilize the `EntityDescription` component to render rich content, including JSX, within an entity's description. This allows for more complex and interactive descriptions.

```jsx
import { Viewer, Entity, PointGraphics, EntityDescription } from "resium";
import { Cartesian3 } from "cesium";

const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);

function App() {
  return (
    <Viewer full>
      <Entity position={position} name="Tokyo">
        <PointGraphics pixelSize={10} />
        <EntityDescription>
          <h1>Hello, world.</h1>
          <p>JSX is available here!</p>
        </EntityDescription>
      </Entity>
    </Viewer>
  );
}

export default App;
```

--------------------------------

### Migrate Entity Description Rendering

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/migration.md

Children of the Entity component are no longer rendered as descriptions. Use the `EntityDescription` component for rendering descriptions.

```jsx
import { Viewer, Entity } from "resium";

const Component = () => (
  <Viewer>
    <Entity>
      <h1>Hello, world</h1>
      <p>This is test</p>
    </Entity>
  </Viewer>
);
```

```jsx
import { Viewer, Entity, EntityDescription } from "resium";

const Component = () => (
  <Viewer>
    <Entity>
      <EntityDescription>
        <h1>Hello, world</h1>
        <p>This is test</p>
      </EntityDescription>
    </Entity>
  </Viewer>
);
```

--------------------------------

### Configure TypeScript Paths

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Alias the 'cesium' import in tsconfig.json to point to your re-export module.

```json
{
  "compilerOptions": {
    "paths": {
      "cesium": ["./src/cesium.ts"]
    }
  }
}
```

--------------------------------

### Add Webpack Plugins for Copying Cesium Assets (Option B)

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Configures webpack plugins to copy only Cesium asset files and define the base URL. This is for Option B.

```javascript
const webpack = require("webpack");
const HtmlPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
```

```javascript
{
  plugins: [
    new HtmlPlugin({
      template: "index.html",
    }),
    new CopyWebpackPlugin({
      patterns: [
        { from: "node_modules/cesium/Build/Cesium/Workers", to: "Workers" },
        {
          from: "node_modules/cesium/Build/Cesium/ThirdParty",
          to: "ThirdParty",
        },
        { from: "node_modules/cesium/Build/Cesium/Assets", to: "Assets" },
        { from: "node_modules/cesium/Build/Cesium/Widgets", to: "Widgets" },
      ],
    }),
    new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify(""),
    }),
  ];
}
```

--------------------------------

### Load GeoJSON and KML Data

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/getting-started.md

Use GeoJsonDataSource and KmlDataSource components to load data from file paths or JavaScript objects. Ensure the data is in the correct format.

```jsx
import { Viewer, GeoJsonDataSource, KmlDataSource } from "resium";

const data = {
  type: "Feature",
  properties: {
    name: "Coors Field",
    amenity: "Baseball Stadium",
    popupContent: "This is where the Rockies play!",
  },
  geometry: {
    type: "Point",
    coordinates: [-104.99404, 39.75621],
  },
};

function App() {
  return (
    <Viewer full>
      <GeoJsonDataSource data={\"your_geo_json.geojson\"} />
      <KmlDataSource data={\"your_geo_json.kml\"} />
      <GeoJsonDataSource data={data} />
    </Viewer>
  );
}

export default App;
```

--------------------------------

### Simplify useCesium Hook Type Argument

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/migration.md

The `useCesium` hook no longer requires a type argument. You can omit it, though adding one is still optional.

```ts
import { Viewer } from "cesium";
import { useCesium } from "resium";

// before
const { viewer } = useCesium<{ viewer?: Viewer }>();

// after
const { viewer } = useCesium();
```

--------------------------------

### Add Cesium World Terrain

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/getting-started.md

Configure the `Viewer` component to use Cesium's world terrain by providing a `terrainProvider`. This enhances the 3D visualization with realistic terrain data.

```jsx
import { Viewer, Entity, PointGraphics, EntityDescription } from "resium";
import { Cartesian3, createWorldTerrain } from "cesium";

const terrainProvider = createWorldTerrain();
const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);

function App() {
  return (
    <Viewer full terrainProvider={terrainProvider}>
      <Entity position={position} name="Tokyo">
        <PointGraphics pixelSize={10} />
        <EntityDescription>
          <h1>Hello, world.</h1>
          <p>JSX is available here!</p>
        </EntityDescription>
      </Entity>
    </Viewer>
  );
}

export default App;
```

--------------------------------

### Enable React Suspense for Data Loading

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/advanced.md

Components like `GeoJsonDataSource` can opt into React Suspense by passing the `suspense` prop. This allows for declarative data fetching and handling of loading states with a parent `<Suspense>` boundary.

```tsx
import { Suspense } from "react";
import { Viewer, GeoJsonDataSource } from "resium";

const App = () => (
  <Viewer>
    <Suspense fallback={<Loading />}>
      <GeoJsonDataSource data="/path/to/data.geojson" suspense />
    </Suspense>
  </Viewer>
);
```

--------------------------------

### Custom Viewer Container Styles

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/getting-started.md

Customize the viewer's container using the `style` and `className` props. These props are applied to the underlying `div` element, allowing integration with CSS-in-JS libraries.

```jsx
<Viewer
  style={{
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  }}
/>
```

--------------------------------

### Access Cesium Viewer Context with useCesium Hook (TypeScript)

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/advanced.md

In TypeScript, the `useCesium` hook provides typed access to the Cesium `Viewer` object. Ensure you have the necessary Cesium types imported.

```tsx
import { Viewer } from "cesium";
import { useCesium } from "resium";

const ExampleComponent = () => {
  const { viewer } = useCesium();
  return <p>Cesium Viewer object is{viewer ? "" : " not"} provided here.</p>;
};

export default ExampleComponent;
```

--------------------------------

### Display Entity with Name and Description

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/getting-started.md

Add a name and a simple text description to an entity. This information can be displayed in Cesium's default UI elements.

```jsx
import { Viewer, Entity, PointGraphics } from "resium";
import { Cartesian3 } from "cesium";

const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);

function App() {
  return (
    <Viewer full>
      <Entity position={position} name="Tokyo" description="Hello, world.">
        <PointGraphics pixelSize={10} />
      </Entity>
    </Viewer>
  );
}

export default App;
```

--------------------------------

### Configure Cesium Externals in Webpack (Option A)

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Configures webpack to treat Cesium as an external dependency, assuming it will be loaded via HTML. This is part of Option A.

```javascript
{
  externals: {
    cesium: "Cesium";
  }
}
```

--------------------------------

### Accessing Cesium Element with createRef (Class Component)

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/guide.md

Use `createRef` in class components to create a ref object. Access the Cesium element via `this.ref.current.cesiumElement` in `componentDidMount`.

```jsx
import { Component, createRef } from "react";
import { Viewer } from "resium";

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.ref = createRef();
  }

  componentDidMount() {
    if (this.ref.current && this.ref.current.cesiumElement) {
      // this.ref.current.cesiumElement is Cesium's Viewer
      // DO SOMETHING
    }
  }

  render() {
    return <Viewer ref={this.ref} />;
```

--------------------------------

### Override Cache Key for Data Fetching

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/advanced.md

Customize the cache key for fetched data by using the `cacheKey` prop. This is useful for busting the cache when content changes or for deduplicating fetches across components.

```tsx
<GeoJsonDataSource data={url} suspense cacheKey="data-v2" />
```

--------------------------------

### Accessing Cesium Element with createRef (TypeScript Class Component)

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/guide.md

In TypeScript class components, use `createRef` with the appropriate type for the Cesium element to ensure type safety when accessing the ref.

```tsx
import { Component, createRef } from "react";
import { Viewer as CesiumViewer } from "cesium";
import { Viewer } from "resium";

class ExampleComponent extends Component {
  private ref = createRef<CesiumViewer | undefined>();

  componentDidMount() {
    if (this.ref.current?.cesiumElement) {
      // this.ref.current.cesiumElement is Cesium's Viewer
      // DO SOMETHING
    }
  }

  render() {
    return <Viewer ref={this.ref} />;
```

--------------------------------

### Accessing Cesium Element with Callback Ref (Class Component)

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/guide.md

In class components, use a callback function for the `ref` prop to assign the Cesium element directly to a class property. Access it in `componentDidMount` after the component has rendered.

```jsx
import { Component } from "react";
import { Viewer } from "resium";

class ExampleComponent extends Component {
  componentDidMount() {
    if (this.viewer) {
      // this.viewer is Cesium's Viewer
      // DO SOMETHING
    }
  }

  render() {
    return (
      <Viewer
        ref={(e) => {
          this.viewer = e ? e.cesiumElement : undefined;
        }}
      />
    );
  }
}
```

--------------------------------

### Access Cesium Viewer Context with useCesium Hook

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/advanced.md

Use the `useCesium` hook within your React components to access the Cesium `Viewer` object. This is useful for interacting directly with the Cesium API.

```jsx
import { useCesium } from "resium";

const ExampleComponent = () => {
  const { viewer } = useCesium();
  return <p>Cesium Viewer object is{viewer ? "" : " not"} provided here.</p>;
};

export default ExampleComponent;
```

--------------------------------

### Next.js App Router: Render Cesium Component

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Render the client-only Cesium component with SSR disabled in a Next.js App Router page.

```jsx
"use client";

import dynamic from "next/dynamic";

const Cesium = dynamic(() => import("./Cesium"), { ssr: false });

export default function Page() {
  return <Cesium />;
}
```

--------------------------------

### Next.js Pages Router: Render Cesium Component

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/installation.md

Render the client-only Cesium component with SSR disabled using next/dynamic for Next.js Pages Router.

```jsx
import dynamic from "next/dynamic";

const Cesium = dynamic(() => import("../components/Cesium"), { ssr: false });

export default function Home() {
  return <Cesium />;
}
```

--------------------------------

### Entity Component within CustomDataSource

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/guide.md

Shows how an Entity component nested within a CustomDataSource component adds the entity to the CustomDataSource's entities and the CustomDataSource to the Viewer's dataSources.

```jsx
<Viewer>
  <CustomDataSource>
    <Entity />
  </CustomDataSource>
</Viewer>
```

```javascript
const viewer = new Cesium.Viewer();
const dataSource = new Cesium.CustomDataSource();
const entity = new Cesium.Entity();

customDataSource.entities.add(entity);
viewer.dataSources.add(dataSource);
```

--------------------------------

### Update Event Handler Signature in Viewer

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/migration.md

Event handlers in components like Viewer no longer receive entity and primitive directly. Instead, they receive the result of `scene.pick`.

```jsx
<Viewer
  onClick={(e, target) => {
    if (target instanceof Entity) {
      // target is a entity!
    }
  }}
/>
```

```jsx
<Viewer
  onClick={(e, target) => {
    if (target?.id instanceof Entity) {
      // target.id is an Entity!
    } else if (target?.primitive instanceof Primitive) {
      // target.id is a Primitive!
    } else if (target instanceof Cesium3DTileFeature) {
      // target is a Cesium3DTileFeature!
    }
  }}
/>
```

--------------------------------

### Accessing Cesium Element with Callback Ref (TypeScript Class Component)

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/guide.md

For TypeScript class components, define the ref property with the correct Cesium element type and use a callback ref to assign the initialized element.

```tsx
import { Component } from "react";
import { Viewer as CesiumViewer } from "cesium";
import { Viewer } from "resium";

class ExampleComponent extends Component {
  private viewer: CesiumViewer | undefined;

  componentDidMount() {
    if (this.viewer) {
      // this.viewer is Cesium's Viewer
      // DO SOMETHING
    }
  }

  render() {
    return (
      <Viewer
        ref={(e) => {
          this.viewer = e ? e.cesiumElement : undefined;
        }}
      />
    );
  }
}
```

--------------------------------

### Accessing Cesium Element with useRef (TypeScript Function Component)

Source: https://github.com/reearth/resium/blob/main/docs/src/content/docs/guide.md

In TypeScript function components, use `useRef` with the `CesiumComponentRef` type for proper type checking when accessing the Cesium element.

```tsx
import { useEffect, useRef } from "react";
import { Viewer as CesiumViewer } from "cesium";
import { Viewer, CesiumComponentRef } from "resium";

const ExampleComponent = () => {
  const ref = useRef<CesiumComponentRef<CesiumViewer>>(null);

  useEffect(() => {
    if (ref.current?.cesiumElement) {
      // ref.current.cesiumElement is Cesium's Viewer
      // DO SOMETHING
    }
  }, []);

  return <Viewer ref={ref} />;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.