Why not use React.FC?

React.FC was once standard but it implicitly types children and complicates generics, so the React team and most style guides now recommend typing props directly on the function parameter. This stub follows that convention.

How do I mark a prop as optional?

Add a question mark to the prop name, like onClick?, and the generated interface declares it with the optional modifier (onClick?: () => void). Optional props can be omitted by callers without a type error.

Should I use an interface or a type for props?

Both work for props. Interfaces are conventional for object-shaped props and can be extended, while type aliases are handier for unions. This builder emits an interface, which you can switch to a type if you prefer.

What is the difference between default and named export?

A default export lets callers import the component under any name, while a named export enforces the exact name and plays better with tree-shaking and refactoring tools. Pick whichever your codebase standardizes on.

Does it add state automatically?

Only if you ask. When you enable state, the stub imports useState and adds one state hook so you have a starting point; otherwise it stays a pure presentational component.

React TypeScript Component Stub Builder

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

A typed React component, scaffolded correctly

Every React component in a TypeScript codebase starts the same way: a props interface, a function that destructures those props, some JSX, and an export. Getting the typing right — optional props, no implicit any, the right export style — is easy to fumble. This builder emits a clean, modern stub from a name and a prop list.

How it works

The tool parses your prop lines (name: type, with a trailing ? on the name marking it optional) into a TypeScript interface ComponentNameProps. It then writes function ComponentName({ ...destructured }: ComponentNameProps) { ... }, typing props directly on the parameter rather than using React.FC. If you enable state it imports useState and adds one const [value, setValue] = useState(...) hook. The body returns a minimal JSX wrapper that renders the props so the file compiles and renders immediately. Finally it appends either export default ComponentName or a named export.

Tips and example

Type props on the parameter, not via React.FC, to avoid implicit children and generic friction.
Mark genuinely optional props with ?; required props should stay required to catch missing data early.
Keep the stub presentational; lift data fetching into a parent or a hook for testability.

interface GreetingProps {
  name: string;
  excited?: boolean;
}

export default function Greeting({ name, excited }: GreetingProps) {
  return <p>Hello, {name}{excited ? "!" : "."}</p>;
}