React Grab

Storybook react-grab addon

View on GithubNew to Storybook?Get started

storybook-addon-react-grab

Storybook addon that wires up react-grab so you can grab component context for coding agents straight from the story canvas.

Install

bun add -d storybook-addon-react-grab react-grab

Then register the addon in .storybook/main.ts:

export default {
  addons: ['storybook-addon-react-grab'],
};

Init-only options

export default {
  addons: [
    {
      name: 'storybook-addon-react-grab',
      options: {
        reactGrab: {
          telemetry: false,
          maxContextLines: 5,
        },
      },
    },
  ],
};

These apply once per preview iframe. Story parameters override anything live-settable.

Development

bun run storybook runs this repo's own Storybook against dist/. It shares this repo's React, so it cannot catch bugs that only appear when the addon's React differs from Storybook's.

bun run fixture is the realistic check: it packs the addon exactly as npm would publish it, installs that tarball into examples/consumer (React 19, addon referenced by package name), and starts Storybook on port 6007. Use it before publishing.

License

MIT

Made by
  • cottons-kr
    cottons-kr
Work with
    Angular
    Ember
    HTML
    Marko
    Mithril
    Preact
    Rax
    React
    Riot
    Svelte
    Vue
    Web Components
Tags