(2020.08.12更新)
npmパッケージとして公開しました。
この記事とは仕様が変わっているので今後はこちらを使うことをお勧めします。
シンプルなReact用JSONエディター

やったこと

Reactで作ったコンポーネントの動作確認をするのに、渡すpropsを直接ソースに打ち込んでコンパイルして確認して・・・という流れを毎回辿るのは、ホットリロードがあっても辛かった。

何もプロジェクト全体をビルドしなくても、そのコンポーネントに渡すpropsだけを差し替えられれば良いのだから、画面上に置いたtextareaにJSONを書いて渡せば良いんじゃないかと思ってやってみた。

使い方

例えばこんな感じ。
onChangeイベントでhandleUpdateDebugDataを発火して、エディタに書かれた内容をJSONにパースして、テストしたいComponentのpropsに渡している。
JSONのパースに失敗したときはエラーの内容がエディタの方に表示される。

使用例


import React, { useState, useCallback } from 'react'
import { DebugTextEditor } from './DebugTextEditor'

const Index = props => {
    const [data, setData] = useState({})
    const [error, setError] = useState("")
    const handleUpdateDebugData = useCallback(str => {
        try {
            setData(JSON.parse(str))
            setError("")
        }
        catch (e) {
            setError([e.name, e.message].join(":"))
        }
    }, [setData, setError])
    return (<>
        <YourComponent data={data} />
        <DebugTextEditor onChange={handleUpdateDebugData} error={error} />
    </>)
}

その他オプション

<DebugTextEditor
    // valueで初期値を設定可能
    value=""
    // onSubmitを指定するとSubmitボタンが現れる
    onSubmit={handleUpdateDebugData}
    // 各要素のstyleをprops.styleから上書き可能
    style={
        // 親要素(form)のスタイル
        ...
        textarea: {
            // textarea要素のスタイル
            ...
        },
        error: {
            // error用要素のスタイル
            ...
        },
        button: {
            // button要素のスタイル
            ...
        }
    } 
/>

今後やりたいこと

エディタ部分は素のtextareaまんまなので、Tabキーが使えなかったり自動インデントできなかったりでJSON文字列を書くには辛い
- Editor.jsとかDraft.jsとか使えば良いのかなとも思うけど手を出せてない。やりたいことに対して手段がデカすぎる気もしている。
npmで公開しないと、正直、自分がこの記事を読んだとして、使ってみようとは思わない。
- 単にやったことないからだろうけどハードルの高さを感じている。うーん。
Productionビルド時に勝手に消えてくれたらいいなあ
ページをリロードする度に打ち込んだ文字列が消えるので、LocalStorageに保存しておきたい
styleの指定方法が小慣れてないので、なんか良い方法あったら知りたい

Reactでデバッグに使う用のテキストエディタを作った

やったこと

使い方

今後やりたいこと