Reactが向いているのはユーザの入力をリアルタイムに、かつ画面上の様々な場所に反映するようなインタラクティブなWebアプリケーションです。開発者は状態を気にせず画面を作れるのが利点でしょう。 さらにReactではコンポーネントの再利用がしやすいのも利点と言えます。今回はFacebookの開発したテキストエディタ開発用コンポーネントDraft.jsを紹介します。

Draft.jsの使い方

Draft.jsのデモです。文字を選択して色をつけられます。

背景色を変えることもできます。

改行すると、それに合わせてテキストエリアの大きさも変化します。

リンクを追加。

機能を追加すればWYSIWYGエディタとして使えます。

Twitter風に。@や#に対して色がつきます。

数式を埋め込む機能もあります。

編集はテキストエリアで行います。

Reactなので、変更はリアルタイムに反映されます。

Draft.jsはコンポーネントなので、そのまま使うよりも自分たちのWebアプリケーションに組み込んだり、さらに機能を追加して利用するのが基本となるでしょう。もちろんDraft.jsをベースにReactによるテキストエディタ開発も良さそうです。

Draft.jsはReact用、JavaScript製のオープンソース・ソフトウェア（BSD License）です。

facebook/draft-js: A React framework for building text editors.