React Tree Component – 宣言的に実装できる React ツリーコンポーネント

Reactでツリー(Tree) UIを実装する必要があるとき、状態管理やスタイリングを直接扱っていると、思った以上に多くのコードと繰り返し作業が必要になります。これを単純化するために、react-tree というオープンソースを作りました。

主な特徴

🌳 宣言的 API
Reactコンポーネント方式でツリーを自然に宣言できるため、ファイルエクスプローラーや階層構造 UI を書きやすくなります。

<Tree>  
  <TreeItem>  
    <TreeItemLayout>Documents</TreeItemLayout>  
    <Tree>  
      <TreeItem>File A</TreeItem>  
      <TreeItem>File B</TreeItem>  
    </Tree>  
  </TreeItem>  
</Tree>  

📄 JSONデータ対応
TreeWithJson コンポーネントを使えば、別途マッピングロジックを書かなくても JSON データをそのままツリー構造としてレンダリングできます。
👉 Tree With JSON Demo

🎨 強力なカスタマイズ性
各ノードを好みの UI に変更できるよう設計されており、単純なテキストだけでなく、アイコン、ボタン、状態表示などにも簡単に拡張できます。

🔧 TypeScript 対応
ジェネリクスベースの型定義が含まれているため、安全に利用できます。

インストール

npm install @roseline124/react-tree  
yarn add @roseline124/react-tree  
pnpm add @roseline124/react-tree  

デモ

Basic Tree
Tree With Json

GitHub

👉 https://github.com/roseline124/react-tree

---

Reactでツリーを実装する必要がある方の助けになればうれしいです。
フィードバック、バグレポート、機能提案のいずれも歓迎します 🙌