React Wrapper

React provider and hooks for @legit-sdk/core (Github )

Overview

The @legit-sdk/react package provides React-specific abstractions over the core LegitFS SDK, making it easy to build React applications with automatic version control, commit history, and collaborative editing features.

Key Features

Legit Versioning Features: Ootb history, rollback, branching
Auto initialization: Wrapper initializes a legitFs
Auto reactivity: Wrapper gives access to reactive props
Path abstractions: Wrapps the nodeish FS API

First steps with React wrapper

API - Complete API reference for provider and hooks
Setup - Get started using the React wrapper
Working with One File - Using useLegitFile hook and how the abstraction works
Accessing Legit Context - Using useLegitContext for advanced operations

Architecture

The React wrapper follows a provider pattern:


LegitProvider (initializes SDK, polls for changes)
    ↓
useLegitFile (reads/writes files, manages history)
    ↓
Your Components (editor, history viewer, etc.)

The LegitProvider creates a single legitFs instance and shares it through React context. Hooks like useLegitFile consume this context to provide file operations with automatic commit tracking.

Core Concepts

Automatic Commits

Unlike traditional Git workflows, the React wrapper automatically creates commits when you save files. Each call to setData() writes the file and creates a commit with a descriptive message.

Reactive Updates

The wrapper polls the repository HEAD to detect changes from other sources (like sync or other tabs). When the HEAD changes, all hooks automatically reload their data.

This will later be replaced by a more sofisticated reactive system.

File Initialization

You can provide initialData when using useLegitFile. If the file doesn’t exist, it will be automatically created with that content on first mount.