読者です 読者をやめる 読者になる 読者になる

bokuweb.me

べんきょうしたこととか

ソートとリサイズが可能なペインコンポーネントreact-sortable-paneを作った

React.js

今作ってるtwitterクライントでソートとリサイズができるコンポーネントが欲しかったので作った。

作ったもの

github.com

デモ

http://bokuweb.github.io/react-sortable-pane

スクリーンショット

f:id:bokuweb:20160131164948g:plain

使い方

インストール

npm i react-sortable-pane

サンプル

以下のように使用する。

<SortablePane margin={10}>
  <Pane
     width={200}
     height={500}
     style={style}>
     A
  </Pane>
  <Pane
     width={300}
     height={400}
     style={style}>
    B
  </Pane>
</SortablePane>

このコンポーネントについて

もともとは以下のコンポーネントを作ったときのデモだったんだけど、今回コンポーネント化しといた。

blog.bokuweb.me

まだ水平方向しか対応していないけど、垂直方向への対応だとかテストとか充実させたい。使用用途としては以下のように使用することを想定している。

f:id:bokuweb:20160131165555g:plain

react-motionと拙作のreact-resizable-boxを使用している。react-motionを使うと表現の幅が広がるので楽しい挙動のコンポーネントを作れてよい。