open-index/open-npm huggingface dataset:
npm package: @nativewindow/react
Description: React bindings for native-window IPC (beta)
Author: Francesco Saverio Cannizzaro
Latest version: 1.0.6

# @nativewindow/react

[![npm](https://img.shields.io/npm/v/@nativewindow/react)](https://www.npmjs.com/package/@nativewindow/react)

> [!NOTE]
> This project is in **beta**. APIs may change without notice.

React hooks for [native-window-ipc](https://github.com/nativewindow/webview/tree/main/packages/ipc). Provides type-safe React bindings for the webview side of the IPC channel.

## Install

```bash
bun add @nativewindow/react
# or
deno add npm:@nativewindow/react
```

### Peer Dependencies

- `react` ^18.0.0 || ^19.0.0
- `@nativewindow/ipc`

## Usage

### Factory approach (recommended)

Create pre-typed hooks from your schemas:

```ts
// channel.ts
import { z } from "zod";
import { createChannelHooks } from "@nativewindow/react";

export const { ChannelProvider, useChannel, useChannelEvent, useSend } = createChannelHooks({
  host: {
    "update-title": z.string(),
  },
  client: {
    counter: z.number(),
  },
});
```

### Provider setup

Wrap your app with `ChannelProvider`:

```tsx
import { ChannelProvider } from "./channel";

function App() {
  return (
    <ChannelProvider>
      <Counter />
    </ChannelProvider>
  );
}
```

### Hooks

```tsx
import { useChannelEvent, useSend } from "./channel";

function Counter() {
  const [count, setCount] = useState(0);
  const send = useSend();

  // Subscribe to host events with automatic cleanup
  useChannelEvent("update-title", (title) => {
    document.title = title;
  });

  // Send client events to the host
  return <button onClick={() => send("counter", count + 1)}>Count: {count}</button>;
}
```

## API

### `createChannelHooks(options)`

Factory that returns pre-typed `{ ChannelProvider, useChannel, useChannelEvent, useSend }`. Each call creates its own React context, supporting multiple independent channels.

### `ChannelProvider`

React component that creates a `createChannelClient` instance and provides it via context.

### `useChannel()`

Access the typed channel from context. Throws if used outside `ChannelProvider`.

### `useChannelEvent(type, handler)`

Subscribe to a specific IPC event type. Automatically cleans up on unmount. Handler is stored in a ref to avoid re-subscriptions on handler identity changes.

### `useSend()`

Returns a stable `send` function (memoized via `useCallback`).

## Documentation

Full documentation at [nativewindow.fcannizzaro.com](https://nativewindow.fcannizzaro.com)

## License

MIT
npm package: @nativewindow/tsdb
Description: TanStack DB collection adapter for native-window IPC (beta)
Author: Francesco Saverio Cannizzaro
Latest version: 1.0.6

# @nativewindow/tsdb

[![npm](https://img.shields.io/npm/v/@nativewindow/tsdb)](https://www.npmjs.com/package/@nativewindow/tsdb)

> [!NOTE]
> This project is in **beta**. APIs may change without notice.

[TanStack DB](https://tanstack.com/db) collection adapter for [native-window](https://github.com/nativewindow/webview) IPC. Sync data between the host process and webview collections over the native IPC bridge.

## Install

```bash
bun add @nativewindow/tsdb
# or
deno add npm:@nativewindow/tsdb
```

## Overview

Two entry points for the two sides of the bridge:

| Entry                       | Side                 | Export                          |
| --------------------------- | -------------------- | ------------------------------- |
| `@nativewindow/tsdb`        | Host (Bun/Deno/Node) | `createDataSource`              |
| `@nativewindow/tsdb/client` | Webview              | `nativeWindowCollectionOptions` |

## Host side (Bun/Deno/Node)

Create a data source and sync data to the webview:

```ts
import { createDataSource } from "@nativewindow/tsdb";

const ds = createDataSource(win, {
  channel: "todos",
  getKey: (item) => item.id,
});

// Single operations
ds.insert({ id: 1, text: "Buy milk", done: false });
ds.update({ id: 1, text: "Buy milk", done: true });
ds.delete({ id: 1 });

// Batch multiple operations in a single message
ds.batch((b) => {
  b.insert({ id: 1, text: "Buy milk", done: false });
  b.insert({ id: 2, text: "Walk dog", done: false });
  b.update({ id: 1, text: "Buy milk", done: true });
});

// Send a full snapshot (replaces all data)
ds.sync([
  { id: 1, text: "Buy milk", done: true },
  { id: 2, text: "Walk dog", done: false },
]);
```

## Webview side (TanStack DB collection)

Use `nativeWindowCollectionOptions` with TanStack DB's `createCollection`:

```ts
import { createCollection } from "@tanstack/db";
import { nativeWindowCollectionOptions } from "@nativewindow/tsdb/client";

const todos = createCollection(
  nativeWindowCollectionOptions({
    id: "todos",
    channel: "todos",
    getKey: (item) => item.id,
  }),
);
```

Works with `useLiveQuery` from `@tanstack/react-db`:

```tsx
import { useLiveQuery } from "@tanstack/react-db";

function TodoList() {
  const todos = useLiveQuery((q) => q.from({ todos }).many());

  return (
    <ul>
      {todos.map((t) => (
        <li key={t.id}>{t.text}</li>
      ))}
    </ul>
  );
}
```

## Wire Protocol

Operations use a single-letter discriminated union over the `{ $ch, p }` IPC envelope:

| Type     | `t`   | Payload                     |
| -------- | ----- | --------------------------- |
| Insert   | `"i"` | `{ t: "i", k: TKey, d: T }` |
| Update   | `"u"` | `{ t: "u", k: TKey, d: T }` |
| Delete   | `"d"` | `{ t: "d", k: TKey }`       |
| Snapshot | `"s"` | `{ t: "s", d: T[] }`        |
| Batch    | `"b"` | `{ t: "b", o: SyncOp[] }`   |

## Documentation

Full documentation at [nativewindow.fcannizzaro.com](https://nativewindow.fcannizzaro.com)

## License

MIT
npm package: @nativewrappers/common
Description: Native wrappers and utilities for use with Cfx scripting runtimes.
Latest version: 0.0.166

<h1 align="center">Monorepo for a FiveM server/client wrapper</h1>

<p align="center">
	<i>🔥 A Javascript/Typescript package for FiveM resource development 🎮</i>
  <br>
  <small>This project is in no way affiliated with FiveM or the Cfx.re Collective.</small>
  </br></br>
  <a href="https://github.com/nativewrappers/nativewrappers/blob/master/LICENSE">
    <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat" alt="License: MIT">
  </a>
  <a href="https://www.npmjs.com/package/@nativewrappers/fivem">
    <img src="https://img.shields.io/npm/v/@nativewrappers/fivem?style=flat" alt="npm version">
  </a>
  <a href="https://www.npmjs.com/package/@nativewrappers/fivem">
    <img src="https://img.shields.io/npm/dm/@nativewrappers/fivem?style=flat">
  </a>
  <a href="https://github.com/nativewrappers/nativewrappers/actions/workflows/config.yml">
    <img src="https://github.com/nativewrappers/nativewrappers/actions/workflows/config.yml/badge.svg" alt="Workflow Status">
  </a>
  <a href="https://github.com/nativewrappers/nativewrappers/commits/master">
    <img src="https://img.shields.io/github/last-commit/nativewrappers/fivem.svg?style=flat" alt="Last commit">
  </a>
</p>

<h3 align="center">This project is currently iterating rapidly, there will be breaking changes.</h3>

<p align="center">
	<h2 align="center"><a href="https://github.com/nativewrappers/nativewrappers/tree/main/docs">Documentation</a></h2>
	<!-- <a href="https://forum.fivem.net/t/fivem-js-v1-3-2-javascript-typescript-wrapper-now-with-menu-class-nativeui/268640">Forum</a> -->
</p>

## Features

- No runtime dependencies
- Entity management through class objects (i.e. `Vehicle` and `Ped` entities)
- Server and Client side variants on wrapper


## Download & Install
```
pnpm add @nativewrappers/redm # for redm,
pnpm add @nativewrappers/fivem # for fivem
pnpm add @nativewrappers/common # for any, should be game agnostic, provides Vector3, decors, kvps, helper functions, etc
pnpm add @nativewrappers/server # for server
```
npm package: @nativewrappers/common-game
Description: Native wrappers and utilities for use with Common Game.
Latest version: 0.0.166

<h1 align="center">Monorepo for a FiveM server/client wrapper</h1>

<p align="center">
	<i>🔥 A Javascript/Typescript package for FiveM resource development 🎮</i>
  <br>
  <small>This project is in no way affiliated with FiveM or the Cfx.re Collective.</small>
  </br></br>
  <a href="https://github.com/nativewrappers/nativewrappers/blob/master/LICENSE">
    <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat" alt="License: MIT">
  </a>
  <a href="https://www.npmjs.com/package/@nativewrappers/fivem">
    <img src="https://img.shields.io/npm/v/@nativewrappers/fivem?style=flat" alt="npm version">
  </a>
  <a href="https://www.npmjs.com/package/@nativewrappers/fivem">
    <img src="https://img.shields.io/npm/dm/@nativewrappers/fivem?style=flat">
  </a>
  <a href="https://github.com/nativewrappers/nativewrappers/actions/workflows/config.yml">
    <img src="https://github.com/nativewrappers/nativewrappers/actions/workflows/config.yml/badge.svg" alt="Workflow Status">
  </a>
  <a href="https://github.com/nativewrappers/nativewrappers/commits/master">
    <img src="https://img.shields.io/github/last-commit/nativewrappers/fivem.svg?style=flat" alt="Last commit">
  </a>
</p>

<h3 align="center">This project is currently iterating rapidly, there will be breaking changes.</h3>

<p align="center">
	<h2 align="center"><a href="https://github.com/nativewrappers/nativewrappers/tree/main/docs">Documentation</a></h2>
	<!-- <a href="https://forum.fivem.net/t/fivem-js-v1-3-2-javascript-typescript-wrapper-now-with-menu-class-nativeui/268640">Forum</a> -->
</p>

## Features

- No runtime dependencies
- Entity management through class objects (i.e. `Vehicle` and `Ped` entities)
- Server and Client side variants on wrapper


## Download & Install
```
pnpm add @nativewrappers/redm # for redm,
pnpm add @nativewrappers/fivem # for fivem
pnpm add @nativewrappers/common # for any, should be game agnostic, provides Vector3, decors, kvps, helper functions, etc
pnpm add @nativewrappers/server # for server
```