@tw199501/specsnap-inspector-react

Drop-in React 18+ SpecSnap Inspector. Zero-config: install, import, drop the component, done.

Install

pnpm add @tw199501/specsnap-inspector-react

react and react-dom (>=18) are peers — assumed to already be in your project.

Usage

import '@tw199501/specsnap-inspector-react/styles.css';
import { SpecSnapInspector } from '@tw199501/specsnap-inspector-react';

export default function App() {
  return (
    <>
      <YourApp />
      <SpecSnapInspector />
    </>
  );
}

Imperative (via ref)

import { useRef } from 'react';
import { SpecSnapInspector, type SpecSnapInspectorHandle } from '@tw199501/specsnap-inspector-react';

function Shell() {
  const inspector = useRef<SpecSnapInspectorHandle>(null);
  return (
    <>
      <button onClick={() => inspector.current?.open()}>Debug</button>
      <SpecSnapInspector ref={inspector} trigger={false} />
    </>
  );
}

Props

Identical to the Vue wrapper — see inspector-vue README.

License

MIT © tw199501