React Flow

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

回転可能なノード

この例では、CSS変換を使用して回転できるカスタムノードの実装方法を示します。

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