Convertir JSON a PropTypes de React — Numio

Convierte un objeto de props de ejemplo en JSON en un objeto propTypes de React. Los objetos anidados pasan a PropTypes.shape, los arrays de cadenas a PropTypes.arrayOf(PropTypes.string) y los valores null a PropTypes.any.

Añadir comprobaciones de props en runtime a un componente React en JavaScript a partir de una muestra de los datos que recibe.

JSON

PropTypes

Cuándo usarla

Añadir comprobaciones de props en runtime a un componente React en JavaScript a partir de una muestra de los datos que recibe.
Documentar las props de un componente de clase heredado con datos de ejemplo conocidos.

Cómo usarla

Pega un objeto JSON con props de ejemplo; un array de objetos en la raíz se fusiona antes en un único objeto.
Revisa el bloque const propTypes = {...}; los objetos anidados aparecen como PropTypes.shape({...}).
Cópialo, añade import PropTypes from "prop-types", asígnalo a MyComponent.propTypes y añade .isRequired donde haga falta.

Props en JSON

{
  "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
}

PropTypes de React

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,
}

Detalles y limitaciones

Se ejecuta en un Web Worker del navegador con el generador propio del sitio y después Prettier; no hay peticiones al servidor.

Ninguna prop se marca como .isRequired, y las funciones, los elementos o los enums no se pueden inferir a partir de JSON.

En un array de objetos todos los elementos se fusionan en un único PropTypes.shape, así que se incluyen las claves que solo aparecen en elementos posteriores.

Los arrays de tipos mixtos pasan a PropTypes.arrayOf(PropTypes.oneOfType([...])), los arrays anidados a arrayOf(arrayOf(...)) y los arrays vacíos a PropTypes.array.

FAQ

¿Puedo pegar un array JSON?

Sí, si contiene objetos: los elementos se fusionan en un único objeto, así que el resultado lista todas las claves encontradas en cualquier elemento. Un array de cadenas o números en la raíz se rechaza.

¿Qué tipo reciben los valores null?

PropTypes.any, porque null no dice nada del tipo real. Sustitúyelo por el validador esperado, por ejemplo PropTypes.string.

¿Siguen funcionando las PropTypes en React 19?

No. React 19 eliminó la comprobación de propTypes, así que las definiciones se ignoran sin aviso. Usa esta salida con React 18 o anterior, o pásate a tipos de TypeScript.

Especificaciones y referencias

prop-types on GitHub