Конвертировать JSON в PropTypes React за считанные секунды — Numio

Превращает пример объекта props в JSON в объект propTypes для React. Вложенные объекты становятся PropTypes.shape, массивы строк — PropTypes.arrayOf(PropTypes.string), значения null — PropTypes.any.

Добавить runtime-проверку props в компонент React на JavaScript по примеру получаемых им данных.

JSON

PropTypes

Когда пригодится

Добавить runtime-проверку props в компонент React на JavaScript по примеру получаемых им данных.
Задокументировать props старого классового компонента по известным примерам данных.

Как пользоваться

Вставьте JSON-объект с примером props; корневой массив объектов сначала объединяется в один объект.
Изучите блок const propTypes = {...}; вложенные объекты отображаются как PropTypes.shape({...}).
Скопируйте его, добавьте import PropTypes from "prop-types", присвойте MyComponent.propTypes и добавьте .isRequired, где нужно.

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
}

React PropTypes

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

Подробности и ограничения

Работает в Web Worker браузера на собственном генераторе сайта, затем Prettier; запросов к серверу нет.

Ни один prop не помечается .isRequired, а функции, элементы и перечисления нельзя вывести из JSON.

Для массива объектов все элементы объединяются в один PropTypes.shape, поэтому включаются и ключи, которые встречаются только в последующих элементах.

Массивы со смешанными типами становятся PropTypes.arrayOf(PropTypes.oneOfType([...])), вложенные массивы — arrayOf(arrayOf(...)), пустые массивы — PropTypes.array.

FAQ

Можно ли вставить JSON-массив?

Да, если он содержит объекты: элементы объединяются в один объект, и в результате перечислены все ключи, встречающиеся в любом элементе. Корневой массив строк или чисел отклоняется.

Какой тип получают значения null?

PropTypes.any, потому что null ничего не говорит о реальном типе. Замените его ожидаемым валидатором, например PropTypes.string.

Работают ли PropTypes в React 19?

Нет. В React 19 проверка propTypes удалена, поэтому определения молча игнорируются. Используйте этот результат с React 18 и ниже или перейдите на типы TypeScript.

Спецификации и справка

prop-types on GitHub