シンプルなReact用JSONエディター

この記事で作っていたJSON Editorを（だいぶ整えて）npmに公開しました。
Reactでデバッグに使う用のテキストエディタを作った

npm: https://www.npmjs.com/package/react-plain-json-editor
GitHub: https://github.com/nariakiiwatani/react-plain-json-editor

※npmへの公開にあたってはこちらの記事を大いに参考にさせていただきました。
初めてのnpm パッケージ公開

インストール

npm i react-plain-json-editor

もしくは

yarn add react-plain-json-editor

できること

Component(<PlainJsonEditor />)とhooks(useJsonEditor)のどちらでも使用可能。
基本的にはコンポーネント版の方が高機能（コンポーネント版は中でhook版を使用している）

大雑把に言えば、teaxtarea要素に打ち込んだテキストがJSONにパースした結果を何かに利用するためのライブラリということになる。

使い方はGitHubのreadmeもしくはデモページを参照。
このデモページでは入力されたJSONデータをそのままそのページ自体のCSS Propertiesとして使用している。
デモページ

Reactでシンプル(by Plain Text)なJSON Editorを作ったデモ。
入力された文字列をそのページ自体のCSS Propertiesとして使用している。https://t.co/lLXlXGmCzOhttps://t.co/pYLba2zmTS#react #react-hooks #jsoneditor #json #npm pic.twitter.com/mOIawqyiTi

— 岩谷成晃 (@nariakiiwatani) August 10, 2020

他にも、独自のデータ構造を持ったprops受けるコンポーネントへのテストデータの生成や
単にJSON文字列のバリデータとしてなど、使い道はいくつかありそう。