Gerar PropTypes do React a partir de JSON — Numio

Transforma um objeto de props de exemplo em JSON em um objeto propTypes do React. Objetos aninhados viram PropTypes.shape, arrays de strings PropTypes.arrayOf(PropTypes.string) e valores null PropTypes.any.

Adicionar verificação de props em runtime a um componente React em JavaScript a partir de uma amostra dos dados que ele recebe.

JSON

PropTypes

Quando usar

Adicionar verificação de props em runtime a um componente React em JavaScript a partir de uma amostra dos dados que ele recebe.
Documentar as props de um componente de classe legado com dados de exemplo conhecidos.

Como usar

Cole um objeto JSON com props de exemplo; um array de objetos na raiz é mesclado antes em um único objeto.
Confira o bloco const propTypes = {...}; objetos aninhados aparecem como PropTypes.shape({...}).
Copie-o, adicione import PropTypes from "prop-types", atribua-o a MyComponent.propTypes e adicione .isRequired onde for necessário.

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

Detalhes e limitações

Roda em um Web Worker do navegador com o gerador próprio do site e depois o Prettier; não há requisições ao servidor.

Nenhuma prop é marcada como .isRequired, e funções, elementos ou enums não podem ser inferidos a partir de JSON.

Em um array de objetos, todos os itens são mesclados em um único PropTypes.shape, então chaves que só aparecem em itens posteriores são incluídas.

Arrays de tipos mistos viram PropTypes.arrayOf(PropTypes.oneOfType([...])), arrays aninhados arrayOf(arrayOf(...)) e arrays vazios PropTypes.array.

FAQ

Posso colar um array JSON?

Sim, se ele contiver objetos: os itens são mesclados em um único objeto, então o resultado lista todas as chaves encontradas em qualquer item. Um array de strings ou números na raiz é rejeitado.

Como os valores null são tipados?

Como PropTypes.any, porque null não diz nada sobre o tipo real. Substitua pelo validador esperado, por exemplo PropTypes.string.

PropTypes ainda funcionam no React 19?

Não. O React 19 removeu a verificação de propTypes, então as definições são ignoradas silenciosamente. Use esta saída com o React 18 ou anterior, ou migre para tipos TypeScript.

Especificações e referências

prop-types on GitHub