React Flow

学ぶ例リファレンス
GitHub React Flow Pro
  • 例
  • 機能概要
    • カスタムノード
    • ノードの更新
    • ストレステスト
    • 非表示
    • ドラッグハンドル
    • 簡単接続
    • エッジドロップでノードを追加
    • 近接接続
    • ノードリサイザー
    • ノードツールバー
    • 回転可能なノード
    • 動的グルーピング
    • 交差
    • シェイプ
    • 接続制限
    • 中間ノードの削除
    • カスタムエッジ
    • エッジのアニメーション
    • エッジの種類
    • 編集可能なエッジ
    • エッジの再接続
    • 接続線
    • 複数接続線
    • エッジマーカー
    • ドロップ時のエッジ削除
    • フローティングエッジ
    • シンプルなフローティングエッジ
    • エッジラベルレンダラー
    • 一時エッジ
    • サブフロー
    • 水平フロー
    • Dagreツリー
    • Entitreeフレックスツリー
    • Elkjsツリー
    • Elkjs複数ハンドル
    • 自動レイアウト
    • フォースレイアウト
    • 展開と折りたたみ
    • ワークフロービルダー
    • インタラクションプロパティ
    • ドラッグアンドドロップ
    • 計算フロー
    • 検証
    • 接続イベント
    • サイクル防止
    • アンドゥとリドゥ
    • コピーアンドペースト
    • ヘルパー線
    • タッチデバイス
    • 保存と復元
    • ズームトランジション
    • コラボレーション
    • コンテキストズーム
    • コンテキストメニュー
    • スタイルコンポーネント
    • Tailwind
    • ターボフロー
    • ベーススタイル
    • ダークモード
    • 静的サーバーサイド生成
    • 画像のダウンロード
    • ReactFlowProvider
    • useReactFlow
例インタラクション
計算フロー

計算フロー

この例では、計算フローヘルパーの useNodesData、 useHandleConnections、 updateNode の使い方を示します。これについての詳細は、計算フローガイドで確認できます。

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

読み取り専用
機能概要ダークモード

xyflowチームによるプロジェクト

私たちは2019年からノードベースのUIのためのオープンソースソフトウェアを構築・維持しています。

ドキュメント

はじめにAPIリファレンス例ショーケース

ソーシャル

DiscordGithubX / TwitterBluesky

xyflow

ブログオープンソース概要お問い合わせ
採用 募集中

リーガル

MITライセンス行動規範インプリント

info@xyflow.com — Copyright ©2024 webkid GmbH. All rights reserved — ウェブサイトデザイン Facu Montanaro