100 % local — seus dados nunca saem do seu navegador

JSON para PropTypes — uma prop errada avisa

Transforme uma amostra JSON em shapes do PropTypes. Uma shape por objeto, obrigatória por padrão: uma prop de forma errada aparece no console de dev.

Instantâneo Privado Zero cookies

Entrada JSON

Saída PropTypes

O que esta ferramenta faz

Uma amostra JSON vira formas PropTypes, um const por objeto.

{ "id": 1, "name": "Ada", "address": { "city": "Paris" } }
import PropTypes from 'prop-types';

export const AddressShape = PropTypes.shape({
  city: PropTypes.string.isRequired,
});

export const RootShape = PropTypes.shape({
  id: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired,
  address: AddressShape.isRequired,
});

Os filhos primeiro: são valores de execução, uma forma precisa existir antes que outra se refira a ela. Um array na raiz ganha o seu próprio const, PropTypes.arrayOf(UsersItemShape).

Obrigatório quer dizer «estava ali»

Cada chave da amostra sai com .isRequired, porque a amostra a trazia. É uma afirmação verificável e, onde for falsa, desfeita com um apagar. A alternativa — marcar tudo opcional — afirmaria algo sobre dados que ninguém mostrou, e deixaria a checagem inútil justo onde importa.

Dois casos ficam moles: um null e um valor desconhecido dão ambos PropTypes.any sem .isRequired. Um null diz que a chave existe e nada sobre o tipo dela: exigi-la afirmaria mais do que a amostra sustenta.

Só em desenvolvimento, e assumido

Os avisos do PropTypes aparecem em desenvolvimento e são pulados em produção, por desenho. Não é defeito, é o acordo: uma checagem em execução que não custa nada onde custaria mais. Também significa que uma carga malformada chegando a um usuário não produz aviso nenhum — PropTypes é ajuda de desenvolvimento, não camada de validação. Para validação que roda em todo lugar, o gerador Zod deste site emite esquemas que rodam.

O React 19 não os lê mais

O React 19 tirou a checagem de propTypes nos componentes: atribuir Component.propTypes não tem mais efeito algum, em silêncio. O pacote prop-types continua existindo e estas formas continuam sendo valores que você mesmo pode chamar — PropTypes.checkPropTypes(…) — mas, se você começa hoje num React atual, este gerador serve às bases existentes mais que às novas.

Os limites de sempre de uma amostra

Um array heterogêneo vira PropTypes.oneOfType([...]), exatamente tão largo quanto o que viu. Um array vazio vira PropTypes.array, sem dizer nada dos itens. E uma chave que não é identificador válido mantém suas aspas, o que o JavaScript aceita sem reclamar.

Privado por padrão

Tudo é executado localmente no seu navegador com JavaScript. Os seus dados nunca são enviados para um servidor, o que torna a ferramenta segura para conteúdo sensível e funciona offline.

Perguntas frequentes

Isso ainda funciona com o React 19?
Não pelo React. O React 19 ignora por completo os `propTypes` de um componente: a checagem foi removida, não marcada como obsoleta. O pacote `prop-types` continua funcionando como validador autônomo que você chama, e estas formas continuam sendo JavaScript válido; mas se você está no React 19 e quer conferir props, a resposta é TypeScript.
Por que tudo leva `.isRequired`?
Porque todas as chaves estavam na amostra. É uma afirmação sobre uma carga, e `.isRequired` é a tradução honesta dela: uma prop que estava ali. Se ela está sempre, o documento não diz; tire o `.isRequired` daquelas de que o seu componente pode passar sem.
Essas checagens vão no meu pacote de produção?
Os avisos não: o React só rodava as checagens de PropTypes em desenvolvimento, e a biblioteca segue a mesma convenção. Os objetos de forma vão junto, a menos que seu empacotador os remova — mais uma razão para um `PropTypes.shape` que descreve uma carga grande ficar modesto.

Conversores relacionados