JSON to React PropTypes in Seconds — Numio
Turns a sample props object in JSON into a React propTypes object. Nested objects become PropTypes.shape, string arrays PropTypes.arrayOf(PropTypes.string), and null values PropTypes.any.
Adding runtime prop checks to a JavaScript React component from a sample of the data it receives.
JSON
PropTypes
When to use it
- Adding runtime prop checks to a JavaScript React component from a sample of the data it receives.
- Documenting the props of a legacy class component with known example data.
How to use
- Paste a JSON object of example props; a root array of objects is merged into one object first.
- Read the const propTypes = {...} block; nested objects appear as PropTypes.shape({...}).
- Copy it, add import PropTypes from "prop-types", assign it to MyComponent.propTypes and add .isRequired where needed.
JSON props
{
"title": "Release notes",
"count": 3,
"visible": true,
"tags": ["web", "react"],
"author": { "name": "Ada", "avatarUrl": "https://example.com/a.png" },
"links": [
{ "label": "Docs" },
{ "label": "Repo", "url": "https://example.com/repo" }
],
"badge": null
}React PropTypes
const propTypes = {
title: PropTypes.string,
count: PropTypes.number,
visible: PropTypes.bool,
tags: PropTypes.arrayOf(PropTypes.string),
author: PropTypes.shape({
name: PropTypes.string,
avatarUrl: PropTypes.string,
}),
links: PropTypes.arrayOf(
PropTypes.shape({
label: PropTypes.string,
url: PropTypes.string,
}),
),
badge: PropTypes.any,
}Details and limitations
Runs in a browser Web Worker with the site's own generator, then Prettier; no server request.
No prop is marked .isRequired, and functions, elements or enums cannot be inferred from JSON.
For an array of objects all items are merged into one PropTypes.shape, so keys that appear only in later items are included.
Mixed-type arrays become PropTypes.arrayOf(PropTypes.oneOfType([...])), nested arrays arrayOf(arrayOf(...)), and empty arrays PropTypes.array.
FAQ
Can I paste a JSON array?
Yes, if it holds objects: the items are merged into one object, so the result lists every key found in any item. An array of strings or numbers at the root is rejected.
How are null values typed?
As PropTypes.any, because null says nothing about the real type. Replace it with the expected validator, for example PropTypes.string.
Do PropTypes still work in React 19?
No. React 19 removed propTypes checking, so the definitions are silently ignored. Use this output with React 18 or earlier, or switch to TypeScript types.