# @mobilc/panorama-react-dom

> React for Valve's Panorama UI (for Dota 2 Custom Games).

Latest version **2.2.0** (published 2024-08-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mobilc/panorama-react-dom
pnpm add @mobilc/panorama-react-dom
yarn add @mobilc/panorama-react-dom
bun add @mobilc/panorama-react-dom
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2024-08-18 |
| First published | 2022-07-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 54.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | takegine |
| Keywords | dota, panorama, react, jsx |

## Links

- npm: https://www.npmjs.com/package/@mobilc/panorama-react-dom
- Repository: https://github.com/takegine/testdodo/issues
- npm.io page: https://npm.io/package/@mobilc/panorama-react-dom

## Dependencies (2)

- [react-reconciler](https://npm.io/package/react-reconciler.md) ^0.25.1
- [@mobilc/panorama-polyfill](https://npm.io/package/@mobilc/panorama-polyfill.md) ^0.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.2.0 (latest) — 2024-08-18
- 2.1.1 — 2023-09-07
- 2.1.0 — 2023-09-07
- 2.0.8-alpha.0 — 2023-07-07
- 2.0.7 — 2023-06-18
- 2.0.7-alpha.0 — 2023-02-26
- 2.0.6 — 2023-01-23
- 2.0.6-alpha.2 — 2023-01-20
- 2.0.6-alpha.1 — 2023-01-14
- 2.0.6-alpha.0 — 2023-01-14
- 2.0.5 — 2023-01-12
- 2.0.4 — 2022-12-16
- 2.0.3 — 2022-12-16
- 2.0.2 — 2022-12-11
- 2.0.1 — 2022-12-11
- … 23 more at https://npm.io/package/@mobilc/panorama-react-dom/versions

## README

# `@mobilc/panorama-react-dom`

> React for Valve's Panorama UI (for Dota 2 Custom Games).

To get started, check out an [introductory tutorial on ModDota](https://moddota.com/panorama/react).

## Installation

To avoid wasting time on configuration, it's recommended to start with the
[JavaScript](https://github.com/ark120202/dota-templates/tree/webpack-react) or
[TypeScript](https://github.com/ark120202/dota-templates/tree/webpack-typescript-react) templates,
even if you're integrating it into an existing project.

If you want to configure tools yourself, you can follow these instructions:

### Using webpack

webpack is the recommended way to use React with Panorama. To see how webpack can be configured for
use with Panorama, check out [webpack tutorial on ModDota](https://moddota.com/panorama/webpack).

```shell
npm install react @mobilc/panorama-react-dom
```

> If you are using TypeScript you also need to install `@types/react`

```jsx
import React, { useState } from 'react';
import { render } from '@mobilc/panorama-react-dom';

function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);

  return (
    <Panel style={{ flowChildren: 'down' }}>
      <Label text={`Count: ${count}`} />
      <TextButton className="ButtonBevel" text="Increment" onactivate={increment} />
    </Panel>
  );
}

render(<Counter />, $.GetContextPanel());
```

### Using UMD

> Warning: UMD builds don't have a wide ecosystem support and make it harder to write idiomatic
> React code. While UMD might seem like an easier way to get started, using a bundler allows for a
> better code organization and gives you an access to a huge list of libraries built for React.

1. Download UMD bundles of [React](https://unpkg.com/react/umd/react.development.js) and
   [`ReactDOM`](https://unpkg.com/panorama-react-dom/dist/umd/panorama-react-dom.development.js)
2. Put all downloaded files to `panorama/scripts/custom_game/libraries`
3. Include them in your layout file:

```xml
<root>
  <scripts>
    <include src="file://{resource}/scripts/custom_game/libraries/react.development.js" />
    <include src="file://{resource}/scripts/custom_game/libraries/panorama-react-dom.development.js" />
    <!-- Your scripts -->
  </scripts>
  <Panel />
</root>
```

4. Use `React` and `ReactDom` globals in your script:

```js
function Counter() {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount(count + 1);

  return React.createElement(
    'Panel',
    { style: { flowChildren: 'down' } },
    React.createElement('Label', { text: `Count: ${count}` }),
    React.createElement('TextButton', {
      className: 'ButtonBevel',
      text: 'Increment',
      onactivate: increment,
    }),
  );
}

ReactDom.render(React.createElement(Counter), $.GetContextPanel());
```

#### UMD and TypeScript

If you are using TypeScript directly via `tsc` CLI, you need to install `@types/react` and
`@mobilc/panorama-react-dom` from npm, and change your `tsconfig.json` like this:

```diff
{
  "compilerOptions": {
-    "types": ["panorama-types"],
+    "types": ["panorama-types", "react", "@mobilc/panorama-react-dom"],
+    "jsx": "react",
  }
}
```

Then you can use React UMD globals and JSX with type safety:

```tsx
function Counter() {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount(count + 1);

  return (
    <Panel style={{ flowChildren: 'down' }}>
      <Label text={`Count: ${count}`} />
      <TextButton className="ButtonBevel" text="Increment" onactivate={increment} />
    </Panel>
  );
}

ReactDom.render(<Counter />, $.GetContextPanel());
```

## JSX

`ReactDOM` allows to use most of known Panorama panel types as bare elements (i.e.
`<Panel />`). For a full list of supported elements check out
[renderer/panels.ts](src/renderer/panels.ts). All unsupported panel types can be used with
`<GenericPanel type="CustomPanelName" />` pseudo-element.

## API

### Renderer

#### `render(element: ReactElement, container: Panel, callback?: () => void): void`

Render a React element into the layout in the supplied container.

See [ReactDOM.render](https://reactjs.org/docs/react-dom.html#render) for more information.

#### `createPortal(children: ReactNode, container: Panel, key?: null | string): ReactPortal`

Creates a [React Portal](https://reactjs.org/docs/portals.html).

### Hooks

#### `useGameEvent(eventName: string, callback: (event: object) => void, dependencies?: DependencyList): void`

Executes `callback` every time `eventName` game event is fired.

#### `useClientEvent(event: string, callback: (...args: any[]) => void, dependencies?: DependencyList): void`

Executes `callback` every time `event` UI event is fired.

#### `useNetTableKey(name: string, key: string): object`

Gets the value of a key in a custom NetTable and updates component when it changes.

#### `useNetTableAll(name: string): object`

Gets all values in a custom NetTable and updates component when it changes.

#### `useTick(tick: number): boolean`
更新器 
tick tock tool
#### `usePlayerMap(): PlayerID[]`
输出当前玩家ID数组，玩家重连时更新
get all playerID in game now，refresh on anyone connect

#### `useInterval(callback: () => number, interval: number, deps:[]): void`
 * 异步useEffect 
 * 处理当依赖项在回调中被修改造成的挂起
 * same as async useEffect
 * Handle hangs when State in dependencies are modified in callback

# issue
欢迎添加我的个人[飞书](https://www.feishu.cn/invitation/page/add_contact/?token=9fah665e-ee7a-4916-a45d-1693350e39c5&amp;unique_id=fSNYli_1nRgdHKoNPARsJA==),我拉你进话题组中讨论地图制作
 * 比起QQ，飞书可以按话题讨论，对于技术点更有针对性
 * 我也是初尝试，欢迎大家一通使用

或者使用[github](https://github.com/takegine/testdodo/issues) 给我留言。

编辑不易，欢迎通过[爱发电](https://afdian.net/@takegine)对我赞助

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