@sanghyuk-2i/huh-react

React bindings for Huh - Manage error content in spreadsheets with type-safe runtime UI rendering.

Features

• ⚛️ React 18+: Hooks and Context API
• 🎨 Custom Renderers: Full control over error UI
• 🔄 Auto-dismiss: Configurable timeout
• 🌍 i18n: Multi-language support with locale switching
• 🧭 Router Support: Next.js, Remix custom routing integration

Installation

npm install @sanghyuk-2i/huh-react @sanghyuk-2i/huh-core

Basic Usage

import { HuhProvider, useHuh } from '@sanghyuk-2i/huh-react';
import errorConfig from './huh.json';

function App() {
  return (
    <HuhProvider
      config={errorConfig}
      renderers={{
        alert: ({ error }) => <Alert>{error.message}</Alert>,
        toast: ({ error }) => <Toast>{error.message}</Toast>
      }}
    >
      <YourApp />
    </HuhProvider>
  );
}

function YourComponent() {
  const { huh } = useHuh();

  const handleError = () => {
    huh('AUTH_001', { username: 'john' });
  };

  return <button onClick={handleError}>Trigger Error</button>;
}

With Next.js Router

'use client';
import { useRouter } from 'next/navigation';

function App() {
  const router = useRouter();

  return (
    <HuhProvider
      config={errorConfig}
      router={{
        push: router.push,
        back: router.back
      }}
    >
      <YourApp />
    </HuhProvider>
  );
}

Documentation

• API Reference
• Getting Started

License

MIT © sanghyuk-2i