diff --git a/README.md b/README.md index 0d6a31f0..bf82a7e3 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,7 @@ React inside Phoenix LiveView. - 💀 **Dead View** Support - 🐌 **Lazy-loading** React Components - 🦥 **Slot** Interoperability +- 🔗 **Link Component** for LiveView Navigation - 🚀 **Amazing DX** with Vite ## Resources diff --git a/assets/copy/react-components/index.js b/assets/copy/react-components/index.js index 1a96281a..46d1cad4 100644 --- a/assets/copy/react-components/index.js +++ b/assets/copy/react-components/index.js @@ -1,5 +1,9 @@ import { Simple } from "./simple"; +import { LinkExample } from "./link-example"; +import { Link } from "live_react"; export default { Simple, + LinkExample, + Link, }; diff --git a/assets/copy/react-components/link-example.jsx b/assets/copy/react-components/link-example.jsx new file mode 100644 index 00000000..8ec805c5 --- /dev/null +++ b/assets/copy/react-components/link-example.jsx @@ -0,0 +1,40 @@ +import React from "react"; +import { Link } from "live_react"; + +export function LinkExample({}) { + return ( +
+ + External Link (full page reload) + +
+ ++ + Patch Link (same LiveView, calls handle_params) + +
+ ++ + Navigate Link (different LiveView, same session) + +
+ ++ + Replace History (navigate with replace) + +
+
+ Current path: {currentPath}
+
+ These links cause full page reloads, just like regular HTML links. +
++ Patch stays in the same LiveView process, calls handle_params. +
++ Navigate to different LiveViews within the same live_session. +
++ Replace browser history instead of adding new entries. +
++ Use your browser's back/forward buttons to test navigation behavior. + Notice the difference between href (full reload), patch (same process), + and navigate (new process) links. +
+Current Path: <%= @current_path %>
+Current Tab: <%= @current_tab %>
+URL Params: <%= inspect(@params) %>
+LiveView Process: <%= inspect(self()) %>
+Mount Count: <%= @mount_count %>
+Params Update Count: <%= @params_update_count %>
++ 🔄 This page was reached via history replace - check your browser's back button! +
++ ✅ This demonstrates patch navigation - same process, different params! +
++ This demonstrates using the Link component directly in LiveView templates + alongside regular Phoenix link helpers. +
+URL Params: <%= inspect(@params) %>
+LiveView Process: <%= inspect(self()) %>
+ + <%= if @params["phoenix"] do %> ++ 🔵 Navigated here via Phoenix <%= @params["phoenix"] %> link +
++ ⚛️ Navigated here via React <%= @params["react"] %> link +
+