JSON to JavaScript PropTypes

JSON to PropTypes for React components

PropTypes add runtime checks to React component props in plain JavaScript projects: in development, React logs a warning when a prop has the wrong type. Describing a deep data prop by hand with PropTypes.shape is tedious, so this JSON to PropTypes generator builds the shapes from example data, such as an API response you pass to a component.

Example

{ "id": 42, "title": "Write docs", "done": false,
  "owner": { "name": "Ada", "email": null },
  "subtasks": [ { "title": "Outline", "estimate": 2 }, { "title": "Draft" } ] }

import PropTypes from "prop-types";

let _Task;
let _Owner;
let _Subtask;
_Subtask = PropTypes.shape({
    "title": PropTypes.string,
    "estimate": PropTypes.oneOfType([PropTypes.number, PropTypes.any]),
});
_Owner = PropTypes.shape({
    "name": PropTypes.string,
    "email": PropTypes.any,
});
_Task = PropTypes.shape({
    "id": PropTypes.number,
    "title": PropTypes.string,
    "done": PropTypes.bool,
    "owner": _Owner,
    "subtasks": PropTypes.arrayOf(_Subtask),
});

export const Task = _Task;

Use it on a component like this:

import { Task } from "./taskShape";

TaskCard.propTypes = {
    task: Task.isRequired,
};

How JSON types map to PropTypes

Numbers of any kind become PropTypes.number, strings PropTypes.string, booleans PropTypes.bool, nested objects a separate PropTypes.shape, and arrays PropTypes.arrayOf(...). When an array mixes types, for example numbers and strings, the element validator becomes PropTypes.oneOfType([PropTypes.number, PropTypes.string]). Shapes are declared first and assigned afterwards, which allows nested and even recursive shapes to refer to each other. The file exports the top-level shape as an ES module, ready to import into a component.

How to refine the shapes

• Required props: the generated validators are optional. Add .isRequired to fields the component cannot render without, such as title.
• Optional values like estimate are typed as oneOfType([number, any]); simplify to PropTypes.number, which already accepts undefined.
• Fixed values: replace PropTypes.string with PropTypes.oneOf(["open", "closed"]) for status fields.
• Dates in JSON are strings, so they are validated as PropTypes.string.
• exact instead of shape makes React warn about unexpected keys.

PropTypes today

PropTypes checks run only in development builds. React 19 no longer checks propTypes on components, and many projects have moved to TypeScript for compile-time checking. For existing JavaScript code bases on earlier React versions, PropTypes remain a lightweight safety net. If you are migrating, JSON to TypeScript produces interfaces from the same sample, and JSON to Flow covers Flow-typed code. Generation runs in your browser.

Checking data outside a component

The generated shapes are ordinary validators, so you can also check a value by hand, for example an API response in a test or a data-loading function. The prop-types package exposes checkPropTypes for this:

import PropTypes from "prop-types";
import { Task } from "./taskShape";

PropTypes.checkPropTypes(
    { task: Task.isRequired },
    { task: responseData },
    "prop",
    "TaskLoader"
);

Mismatches are logged with console.error, naming the property path, just like component warnings. The check runs only in development builds and does nothing in production, so it is a debugging aid rather than input validation. On React 19, where components no longer check propTypes, this manual call is the way to keep using existing shapes.