JSONをReact PropTypesに数秒で変換 — Numio

JSON で書いたサンプルの props オブジェクトを React の propTypes オブジェクトに変換します。ネストしたオブジェクトは PropTypes.shape、文字列の配列は PropTypes.arrayOf(PropTypes.string)、null 値は PropTypes.any になります。

JavaScript の React コンポーネントに、受け取るデータのサンプルから実行時の prop チェックを追加する。

JSON

PropTypes

こんなときに使えます

JavaScript の React コンポーネントに、受け取るデータのサンプルから実行時の prop チェックを追加する。
既知のサンプルデータを使って、古いクラスコンポーネントの props を文書化する。

使い方

サンプル props の JSON オブジェクトを貼り付けます。ルートがオブジェクトの配列の場合は、まず 1 つのオブジェクトにマージされます。
const propTypes = {...} ブロックを確認します。ネストしたオブジェクトは PropTypes.shape({...}) として表示されます。
コピーして import PropTypes from "prop-types" を追加し、MyComponent.propTypes に代入して、必要な箇所に .isRequired を付けます。

JSON props

{
  "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 で整形します。サーバーへのリクエストはありません。

.isRequired の付く prop はなく、関数、要素、列挙値は JSON から推定できません。

オブジェクトの配列では全要素が 1 つの PropTypes.shape にマージされるため、後の要素にだけあるキーも含まれます。

型が混在する配列は PropTypes.arrayOf(PropTypes.oneOfType([...]))、ネストした配列は arrayOf(arrayOf(...))、空配列は PropTypes.array になります。

FAQ

JSON 配列を貼り付けられますか？

オブジェクトを含む配列なら可能です。要素は 1 つのオブジェクトにマージされ、いずれかの要素にあるキーがすべて結果に並びます。ルートが文字列や数値の配列の場合は受け付けられません。

null 値の型はどうなりますか？

PropTypes.any になります。null からは実際の型がわからないためです。PropTypes.string など、想定されるバリデーターに置き換えてください。

React 19 でも PropTypes は機能しますか？

いいえ。React 19 では propTypes のチェックが削除されたため、定義は黙って無視されます。この出力は React 18 以前で使うか、TypeScript の型に切り替えてください。

仕様を確認する

prop-types on GitHub