Générer des PropTypes React à partir de JSON — Numio

Transforme un objet de props d’exemple en JSON en objet propTypes React. Les objets imbriqués deviennent PropTypes.shape, les tableaux de chaînes PropTypes.arrayOf(PropTypes.string) et les valeurs null PropTypes.any.

Ajouter des vérifications de props à l’exécution à un composant React en JavaScript à partir d’un échantillon des données qu’il reçoit.

JSON

PropTypes

Quand l’utiliser

Ajouter des vérifications de props à l’exécution à un composant React en JavaScript à partir d’un échantillon des données qu’il reçoit.
Documenter les props d’un ancien composant de classe à partir de données d’exemple connues.

Mode d’emploi

Collez un objet JSON de props d’exemple ; un tableau d’objets à la racine est d’abord fusionné en un seul objet.
Lisez le bloc const propTypes = {...} ; les objets imbriqués apparaissent sous la forme PropTypes.shape({...}).
Copiez-le, ajoutez import PropTypes from "prop-types", assignez-le à MyComponent.propTypes et ajoutez .isRequired là où c’est nécessaire.

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

Détails et limites

S’exécute dans un Web Worker du navigateur avec le générateur propre au site, puis Prettier ; aucune requête au serveur.

Aucune prop n’est marquée .isRequired, et les fonctions, éléments ou enums ne peuvent pas être déduits du JSON.

Pour un tableau d’objets, tous les éléments sont fusionnés en un seul PropTypes.shape : les clés qui n’apparaissent que dans des éléments ultérieurs sont donc incluses.

Les tableaux de types mixtes deviennent PropTypes.arrayOf(PropTypes.oneOfType([...])), les tableaux imbriqués arrayOf(arrayOf(...)) et les tableaux vides PropTypes.array.

FAQ

Puis-je coller un tableau JSON ?

Oui, s’il contient des objets : les éléments sont fusionnés en un seul objet, donc le résultat liste toutes les clés trouvées dans n’importe quel élément. Un tableau de chaînes ou de nombres à la racine est refusé.

Comment les valeurs null sont-elles typées ?

En PropTypes.any, car null ne dit rien du vrai type. Remplacez-le par le validateur attendu, par exemple PropTypes.string.

Les PropTypes fonctionnent-elles encore avec React 19 ?

Non. React 19 a supprimé la vérification des propTypes : les définitions sont ignorées sans avertissement. Utilisez cette sortie avec React 18 ou antérieur, ou passez aux types TypeScript.

Spécifications et références

prop-types on GitHub