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

To get started, check out an introductory tutorial on ModDota.

To avoid wasting time on configuration, it's recommended to start with the JavaScript or TypeScript templates, even if you're integrating it into an existing project.

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

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.

npm install react react-panorama

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

import React, { useState } from 'react';
import { render } from 'react-panorama';

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());

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 and react-panorama
2. Put all downloaded files to panorama/scripts/custom_game/libraries
3. Include them in your layout file:

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

4. Use React and ReactPanorama globals in your script:

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,
    }),
  );
}

ReactPanorama.render(React.createElement(Counter), $.GetContextPanel());

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

{
  "compilerOptions": {
-    "types": ["panorama-types"],
+    "types": ["panorama-types", "react", "react-panorama"],
+    "jsx": "react",
  }
}

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

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>
  );
}

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

react-panorama 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. All unsupported panel types can be used with <GenericPanel type="CustomPanelName" /> pseudo-element.

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

See ReactDOM.render for more information.

Creates a React Portal.

Executes callback every time eventName game event is fired.

Executes callback every time event UI event is fired.

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

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