npm package: @kikipoulet/react-dotnetbridge
Description: Bridge communication between React apps and .NET via WebView2
Author: kikipoulet
Latest version: 1.0.0

# @kikipoulet/react-dotnetbridge

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

## Installation

```bash
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:

```tsx
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:

```tsx
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

```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:

```csharp
// 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:

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

### Observable Collections

Use ObservableCollection for collections:

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

### Events

Define events in your service:

```csharp
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