From 0677644e4cfdba3303b27273e06c00fc6cddfb39 Mon Sep 17 00:00:00 2001 From: gronxb Date: Sun, 24 Mar 2024 18:30:59 +0900 Subject: [PATCH] docs(ssr): some example code --- docs/ssr/next-js-app-router.md | 42 ++++++++++++--- docs/ssr/remix.md | 96 +++++++++++++++++++++++++++++++--- 2 files changed, 124 insertions(+), 14 deletions(-) diff --git a/docs/ssr/next-js-app-router.md b/docs/ssr/next-js-app-router.md index 0fc3990e..b84f4662 100644 --- a/docs/ssr/next-js-app-router.md +++ b/docs/ssr/next-js-app-router.md @@ -27,10 +27,10 @@ $ yarn add @webview-bridge/react @webview-bridge/web ::: -### `createLinkBridgeProvider` - +## `createLinkBridgeProvider` +### providers/BridgeProvider.ts ```tsx -// This file is providers/BridgeProvider.ts +"use client"; import { createLinkBridgeProvider } from "@webview-bridge/react"; import type { AppBridge } from ""; // Import the type 'appBridge' declared in native @@ -71,6 +71,7 @@ export default function RootLayout({ return ( + {/* Here */} {children} @@ -82,9 +83,36 @@ export default function RootLayout({ Wrap the `BridgeProvider` around the children in the base code. ## Client Component -### app/components/home.tsx +### app/components/BridgeHome.tsx ```tsx -export default function Home() { +"use client"; +import { useBridgeStatus, useBridgeStore } from "@/providers/BridgeProvider"; + +function Count() { + const count = useBridgeStore((state) => state.count); + + return

Native Count: {count}

; +} + +function DataText() { + const { text, setDataText } = useBridgeStore((state) => ({ + text: state.data.text, + setDataText: state.setDataText, + })); + + return ( +
+

Native Data Text: {text}

+ setDataText(e.target.value)} + /> +
+ ); +} + +export default function BridgeHome() { const { increase, openInAppBrowser } = useBridgeStore((state) => ({ increase: state.increase, openInAppBrowser: state.openInAppBrowser, @@ -128,14 +156,14 @@ Utilize hooks from `createLinkBridgeProvider` for client-side functionality as s import dynamic from "next/dynamic"; import { Suspense } from "react"; -const Home = dynamic(() => import("./home"), { +const BridgeHome = dynamic(() => import("./BridgeHome"), { ssr: false, }); const Page = () => { return ( Loading...}> - + ); }; diff --git a/docs/ssr/remix.md b/docs/ssr/remix.md index f121ef07..35ae4bb0 100644 --- a/docs/ssr/remix.md +++ b/docs/ssr/remix.md @@ -22,10 +22,9 @@ $ yarn add @webview-bridge/react @webview-bridge/web ::: -### `createLinkBridgeProvider` - +## `createLinkBridgeProvider` +### providers/BridgeProvider.ts ```tsx -// This file is providers/BridgeProvider.ts import { createLinkBridgeProvider } from "@webview-bridge/react"; import type { AppBridge } from ""; // Import the type 'appBridge' declared in native @@ -81,9 +80,35 @@ Wrap the `BridgeProvider` around the children in the base code. ## Client Component -### app/components/home.tsx +### app/components/BridgeHome.tsx ```tsx -export default function Home() { +import { useBridgeStatus, useBridgeStore } from "@/providers/BridgeProvider"; + +function Count() { + const count = useBridgeStore((state) => state.count); + + return

Native Count: {count}

; +} + +function DataText() { + const { text, setDataText } = useBridgeStore((state) => ({ + text: state.data.text, + setDataText: state.setDataText, + })); + + return ( +
+

Native Data Text: {text}

+ setDataText(e.target.value)} + /> +
+ ); +} + +export default function BridgeHome() { const { increase, openInAppBrowser } = useBridgeStore((state) => ({ increase: state.increase, openInAppBrowser: state.openInAppBrowser, @@ -115,7 +140,64 @@ export default function Home() { ); } +import { useBridgeStatus, useBridgeStore } from "@/providers/BridgeProvider"; + +function Count() { + const count = useBridgeStore((state) => state.count); + + return

Native Count: {count}

; +} + +function DataText() { + const { text, setDataText } = useBridgeStore((state) => ({ + text: state.data.text, + setDataText: state.setDataText, + })); + + return ( +
+

Native Data Text: {text}

+ setDataText(e.target.value)} + /> +
+ ); +} +export default function BridgeHome() { + const { increase, openInAppBrowser } = useBridgeStore((state) => ({ + increase: state.increase, + openInAppBrowser: state.openInAppBrowser, + })); + const { isNativeMethodAvailable, isWebViewBridgeAvailable } = + useBridgeStatus(); + + return ( +
+
+ {`isWebViewBridgeAvailable: ${String(isWebViewBridgeAvailable)}`} +
+

This is WebView

+ + + + + + + +
+ ); +} ``` Utilize hooks from `createLinkBridgeProvider` for client-side functionality as shown above. @@ -125,7 +207,7 @@ Utilize hooks from `createLinkBridgeProvider` for client-side functionality as s ```tsx import type { MetaFunction } from "@remix-run/node"; -import Home from "~/components/home"; +import BridgeHome from "~/components/BridgeHome"; export const meta: MetaFunction = () => { return [ @@ -139,7 +221,7 @@ export async function clientLoader() { } export default function Index() { - return ; + return ; } ```