JSX Reference
JSX reference for TypeScript — typing components, props, children, events, and refs. Covers React; other frameworks (Solid, Preact, Vue) follow similar patterns.
tsconfig
tsconfig.json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "react"
}
}
Component types
TSX
type Props = { name: string; greeting?: string };
// Function declaration
function Greeter({ name, greeting = 'Hi' }: Props) {
return <h1>{greeting}, {name}</h1>;
}
// Arrow function with React.FC
const Greeter2: React.FC<Props> = ({ name }) => <h1>Hi, {name}</h1>;
Children
| Type | Use for |
|---|---|
React.ReactNode | Anything renderable. |
React.ReactElement | A single JSX element. |
React.JSX.Element | Equivalent to ReactElement. |
React.PropsWithChildren<P> | Helper that adds children to your props type. |
Event types
| Event | TS type |
|---|---|
onClick | React.MouseEvent<HTMLButtonElement> |
onChange on input | React.ChangeEvent<HTMLInputElement> |
onSubmit on form | React.FormEvent<HTMLFormElement> |
onKeyDown | React.KeyboardEvent<HTMLInputElement> |
onFocus / onBlur | React.FocusEvent<HTMLInputElement> |
Refs
TSX
const inputRef = useRef<HTMLInputElement>(null); const dialogRef = useRef<HTMLDialogElement>(null); useEffect(() => inputRef.current?.focus(), []);
State
TSX
const [count, setCount] = useState(0); // number — inferred const [user, setUser] = useState<User | null>(null); // union — explicit
Props of an HTML element
TSX
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
variant?: 'primary' | 'secondary';
};
const Button: React.FC<ButtonProps> = ({ variant = 'primary', ...rest }) => (
<button data-variant={variant} {...rest} />
);
Tip: Don't use
React.FC blindly — modern guidance is to type props directly on the function declaration and skip FC entirely. Less inference noise, no hidden children.Example
Example
// Function components:
// type Props = { name: string };
// const Hi = ({ name }: Props) => <h1>Hi, {name}</h1>;
//
// Children: React.ReactNode
// Event: React.MouseEvent<HTMLButtonElement>
// Ref: React.RefObject<HTMLInputElement>
console.log('React component typing comes from @types/react');
Try it Yourself »
Exercise
Component-children prop type.
children: React.
PascalCase; nine chars.
Discussion
Loading…