Reactを使った多くのコンポーネントが出てきました。Reactの利点として、デザインも一緒になっているので再利用しやすいということが挙げられます。そのため、良いコンポーネントだと思ったら、自分のプロジェクトに取り込むのも難しくないでしょう。 今回はその一つとしてReact-designerを紹介します。Reactで作られたベクターグラフィックスエディタです。

React-designerの使い方

デモ画面です。この四角いオブジェクトがそれぞれ編集できます。

プロパティがあり、色を変えたり、並び替えることもできます。

実際に操作しているところです。オブジェクトの追加も可能です。

React-designerはともすると移動の制御などの面倒くさい機能をReactを使うことでうまく実装しています。自分のWebアプリケーションの中でドロー機能を追加したい時にはReact-designerをベースにすると良さそうです。

React-designerはReact/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

React-designer React-designer fatiherikli/react-designer: Easy to configure, lightweight, editable vector graphics in your react components.