GENERATORS

React Component Generator

Scaffold a React component from a typed prop list — JS or TS, function / arrow / forwardRef / memo, with hooks, a styling approach, children and className passthrough, plus optional test, Storybook story and index barrel files.

What this tool does

It writes a React component and its companion files from a short prop specification, so you skip the repetitive scaffolding.

Prop syntax

One prop per line or comma-separated: title: string, count: number = 0, onSelect: (id: string) => void, items: Item[], children. A default value makes the prop optional.

Component styles

A plain function declaration, an arrow const, forwardRef for components that expose a DOM node, or a memo wrapper. Export as default or named.

Hooks

Tick the hooks you want scaffolded: useState for each piece of local state, useEffect (mount-only or with a cleanup return), useRef, useCallback, useMemo and useContext.

Companion files

A React Testing Library test (render + a smoke assertion), a Storybook CSF3 story, and an index.ts barrel — each toggled on or off.

Privacy

Everything runs in your browser. Nothing is uploaded.

FAQ

Frequently asked questions

JavaScript or TypeScript?

Both. TypeScript emits .tsx with a typed props declaration (inline, interface or type). JavaScript emits .jsx and can add a PropTypes block instead.

When should I use forwardRef?

When a parent needs a ref to a DOM element inside your component — a custom input, button or scroll container. The generator wires the ref through to the root element.

What test framework does it target?

React Testing Library with Jest-style expect. The generated test renders the component and asserts it is in the document — a starting point to build real cases on.

Does the className passthrough include rest props?

Yes. With that option on, the component accepts className plus ...rest and spreads them onto the root element, so it composes like a native element.

Is anything sent to a server?

No. The component is generated entirely in your browser.