React Props Type Generator
Paste a JSX usage tag and infer each prop's TypeScript type — strings, numbers, booleans, arrays, object literals, ReactNode children, and typed event handlers like React.MouseEventHandler. Refine the inferred props (or build them by hand) in a live editor, then emit a props interface, a typed function component, a React.FC, a forwardRef wrapper, or runtime PropTypes — all updating instantly with a shareable URL.
About this ToolHow it works, benefits & use casesTap to collapse
Turn how a React component is used into fully typed props. Paste a JSX usage tag like `<UserCard name="Ada" age={36} isActive={true} tags={["dev"]} onSelect={handleSelect} avatar={<Avatar />}>...</UserCard>` and the generator infers each prop's TypeScript type from its value: quoted attributes become `string`, numeric braces become `number`, shorthand attributes and `{true}`/`{false}` become `boolean`, array and object literals are typed structurally, JSX-valued props and children become `React.ReactNode`, and `on*` handlers map to specific React event handler types such as `React.MouseEventHandler` and `React.ChangeEventHandler`. The inferred props land in a live editor where you can rename them, switch types, mark them optional, set destructuring defaults, and add JSDoc descriptions. From that single model you generate five outputs you can toggle between instantly: a props `interface`, a typed function component, a `React.FC` variant, a `forwardRef` wrapper, or legacy runtime `PropTypes`. Everything runs in your browser and the whole setup is captured in a shareable URL.
How to Use
- 1Paste a component usage tag into the JSX box, or click a built-in example (Button, UserCard, TextField).
- 2Press Infer props from JSX to extract each attribute and its inferred TypeScript type into the prop editor.
- 3Refine any prop: rename it, pick a type (or enter a custom union/type), mark it optional, add a destructuring default, or write a JSDoc description.
- 4Add props by hand with Add prop when you have no JSX to start from, or remove ones you do not want.
- 5Set the component name and toggle children, JSDoc comments, and export keywords as needed.
- 6Switch the output between Interface, Function, React.FC, forwardRef, and PropTypes, then copy, download, or share the result.
Key Benefits
- Infers prop types from a real JSX usage tag — no manual typing to get started
- Maps on* handlers to specific React event handler types (MouseEventHandler, ChangeEventHandler, and more)
- Detects JSX-valued props and children as React.ReactNode automatically
- Live prop editor for renaming, retyping, optional markers, defaults, and JSDoc descriptions
- Five outputs from one model: interface, function component, React.FC, forwardRef, and PropTypes
- Destructured defaults are baked into the generated function and React.FC skeletons
- Works fully offline in the browser with a shareable URL for the exact setup
Common Use Cases
- Bootstrapping a Props interface when converting a JavaScript component to TypeScript
- Generating a typed function-component skeleton from an existing call site
- Scaffolding a forwardRef wrapper component with the right props already typed
- Producing runtime PropTypes for a legacy React project without TypeScript
- Drafting prop types during a code review straight from how a component is used in a PR
- Teaching how JSX attribute syntax maps onto TypeScript prop types
Generated React + TypeScript output
export interface ButtonProps {}Infer from JSX usage
Quoted values become string, {3} becomes number, shorthand attributes and {true} become boolean, and on* handlers map to typed React event handlers.
Props
No props yet. Infer them from a JSX tag above, or add one manually.
Component & output
children?: React.ReactNode
from descriptions
export interface / component
From a usage tag to a typed component
Reverse-engineering prop types by hand is tedious. Paste how a component is actually called and the inferrer reads each attribute: quoted values are string, numeric braces are number, shorthand and {true} are boolean, array and object literals are typed structurally, JSX values become React.ReactNode, and on* props map to specific React event handler types.
Five outputs, one model
The same prop model emits a props interface, a typed function component with destructured defaults, a React.FC variant, a forwardRef wrapper, or legacy runtime PropTypes — switch between them without re-entering anything.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- TypeScript FormatterFormat and beautify TypeScript code
- SVG to React ComponentConvert SVG to a clean TSX/JSX/React Native component — currentColor, prop spread, forwardRef, memo, live preview
- Component Name GeneratorTurn a description into ranked, kind-aware component names with a file scaffold and a name validator (casing, collisions, clarity)
- Changelog GeneratorGenerate changelog from Git commit history
- Heroku Procfile GeneratorBuild a Heroku Procfile and matching app.json — process types, env vars, addons, dyno formation — plus a Procfile parser and audit
- Markdown TOC GeneratorGenerate table of contents for Markdown
It scans the opening tag attribute by attribute, brace- and quote-aware so expressions like onClick={() => f(">")} do not end the tag early. Quoted values become string; numeric braces such as {36} become number; shorthand attributes (disabled) and {true}/{false} become boolean; array literals are typed by their first element (string[], number[]); object literals become Record<string, unknown>; JSX values become React.ReactNode; and on* props map to React event handler types.
Common handler names map to specific React types: onClick and other mouse events to React.MouseEventHandler, onChange to React.ChangeEventHandler, onSubmit/onInput to React.FormEventHandler, onFocus/onBlur to React.FocusEventHandler, and key events to React.KeyboardEventHandler. Any other on* prop falls back to () => void.