@kikipoulet/react-dotnetbridge

Bridge communication between React/JavaScript apps and .NET via WebView2.

Installation

npm install @kikipoulet/react-dotnetbridge

Requirements

• React 16.8+ (for hooks)
• WebView2 runtime (on Windows)

Usage

React Hooks

useObservableProperty

Subscribe to an observable property from .NET:

import { useObservableProperty } from '@kikipoulet/react-dotnetbridge';

function MyComponent() {
  const [isRunning, setIsRunning] = useObservableProperty(myService, 'IsRunning');

  return (
    <div>
      <p>Status: {isRunning ? 'Running' : 'Stopped'}</p>
      <button onClick={() => setIsRunning(!isRunning)}>
        Toggle
      </button>
    </div>
  );
}

useObservableCollection

Subscribe to an observable collection from .NET:

import { useObservableCollection } from '@kikipoulet/react-dotnetbridge';

interface Todo {
  id: number;
  text: string;
  isComplete: boolean;
}

function TodoList() {
  const todos = useObservableCollection<Todo>(todoService, 'Todos');

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

Vanilla JavaScript

import { DotnetBridge } from '@kikipoulet/react-dotnetbridge';

// Wait for bridge to be ready
DotnetBridge.onReady(async () => {
  const myService = await DotnetBridge.getService('MyService');

  // Call a method
  const result = await myService.DoSomething('param');

  // Subscribe to an event
  myService.OnSomeEvent.subscribe((data) => {
    console.log('Event received:', data);
  });
});

// Get a property (auto-generates GetPropertyName method)
const value = await myService.GetSomeProperty();

// Set a property (auto-generates SetPropertyName method)
await myService.SetSomeProperty(newValue);

.NET Configuration

Register Services

In your .NET WebView2 application, register services with the bridge:

// Register a singleton service
BridgeJS.RegisterService<IMyService>(new MyService());

// Register a transient service
BridgeJS.RegisterService<IMyService>(() => new MyService());

// With constructor parameters
BridgeJS.RegisterService<IMyService>(() => new MyService(param1, param2));

Observable Properties

Mark properties as observable:

public class MyService : ObservableObject
{
    private bool _isRunning;
    public bool IsRunning
    {
        get => _isRunning;
        set => SetProperty(ref _isRunning, value);
    }
}

Observable Collections

Use ObservableCollection for collections:

public class MyService
{
    public ObservableCollection<TodoItem> Todos { get; } = new();
}

Events

Define events in your service:

public class MyService
{
    public event EventHandler<string> SomeEvent;

    public void DoSomething()
    {
        SomeEvent?.Invoke(this, "Hello from .NET!");
    }
}

API Reference

DotnetBridge

| Method | Description | |--------|-------------| | getService(name, options?) | Get a service proxy | | isReady() | Check if bridge is ready | | onReady(callback) | Execute callback when ready |

Service Proxy

| Property/Method | Description | |-----------------|-------------| | call(method, params?) | Call a method | | GetPropertyName() | Auto-generated getter | | SetPropertyName(value) | Auto-generated setter | | OnPropertyNameChanged.subscribe(callback) | Subscribe to property changes | | OnEventName.subscribe(callback) | Subscribe to events |

License

MIT