open-index/open-npm huggingface dataset:
npm package: @hology/react
Description: Utilities for integrating Hology Engine in a react app.
Latest version: 0.0.20


Utilities for integrating Hology with a react application. 

## Initiating a game

### useHologyEngine hook

Setup Hology Engine with a reference to a HTML Element in which it will render the game.

### HologyScene component

A component that can simply be dropped into your application to run the engine with a specific scene and game class.

You can pass in a JSX Element for a UI overlay. 

```tsx
function Game() {
  return (
    <HologyScene
      gameClass={GameInstance}
      sceneName="demo"
      actors={{}}
      shaders={{}}
      dataDir="data"
    ></HologyScene>
  );
}

class GameInstance {
  private world = inject(World)

  onStart() {
    world.spawn(Player)
  }
}
```



### Pointer events
When using pointer events to detect events like clicks in a scene, these events are blocked by the UI overlay when using the HologyScene component. To still be able to detect touch and mouse events, add the following CSS code to your project.

```css
.hology-overlay {
  pointer-events: none;
}
.hology-overlay * {
  pointer-events: auto;
}
```
npm package: @hology/vite-plugin
Description: Vite Plugin for building Hology apps
Latest version: 0.0.9

# Hology Vite Plugin

Prepares data for 

## Usage

Add the plugin to your vite config like below.

```ts
// vite.config.ts
import hologyBuild from '@hology/vite-plugin'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    hologyBuild()
  ]
})

```