ReactApps

2019年3月11日

簡単なマークダウンのエディタをつくる

lczcmzf6d

はじめに

ローカル環境でこのサンプルを動かすには以下の手順に従ってください。

$ git close git@github.com:reiwa/reactapps.git
$ cd reactapps
$ yarn
$ yarn workspace md start

※ $の部分はペーストしないでください。

内容

markedを用いて最もシンプルなマークダウンエディタを作ります。
markedというライブラリを用いて、ユーザが入力したマークダウン形式の文字列をHTMLに変換しプレビューを表示します。UIを追加してマークダウンエディタを開発することができます。

コード

import marked from 'marked'
import React, { Fragment, FunctionComponent, useState } from 'react'

const App: FunctionComponent = () => {
  const [text, setText] = useState('')

  return (
    <Fragment>
      <textarea onChange={event => setText(event.target.value)} value={text} />
      <div dangerouslySetInnerHTML={{ __html: marked(text) }} />
    </Fragment>
  )
}

export default App

いくつかポイント

markedというライブラリを使用します。npmで拾ってきました。

import marked from 'marked'

このコンポーネントはユーザの入力した文字列を状態として扱います。

const [text, setText] = useState('')

textareaに文字列が入力されるとsetStateによってtextが更新されます。

<textarea onChange={event => setText(event.target.value)} value={text} />

marked(text)からHtmlが得られるのでdangerouslySetInnerHTMLを用いて表示しています。

return (
  <Fragment>
    <textarea onChange={event => setText(event.target.value)} value={text} />
    <div dangerouslySetInnerHTML={{ __html: marked(text) }} />
  </Fragment>
)