search

gronxb / webview-bridge

Fully Type-Safe Integration for React Native WebView and Web
https://gronxb.github.io/webview-bridge/
MIT License
222 stars 5 forks source link

Feature: Shared State with react native and react #17

Closed codecomeon closed 9 months ago

codecomeon commented 9 months ago

for example. App inject the token, userInfo, business id, business info, web get the state; and web can change it, app will auto useEffect the change of any state.

It's a common usecase for every webview hybrid app.

codecomeon commented 9 months ago

Vanilla html, react or vue or other web framework, can develop corresponding wrappers for convenient use.

gronxb commented 9 months ago

Thank you for your suggestion!!!

I am currently developing the same feature you mentioned. My goal is to implement two-way binding between the web and React Native.

Of course, for the web part, I am considering a reactive state that does not depend on specific frameworks like React, Vue, or Svelte.

It's likely that libraries will be developed for integrating state across different frameworks as well. Examples could include @webview-bridge/react, @webview-bridge/vue.

gronxb commented 9 months ago

shared state was released in v1.3.1 🥰

https://github.com/gronxb/webview-bridge/assets/41789633/fbd9b920-7fda-4d15-a365-4f3400a56e91

Released a library to integrate with state in vanilla, react, and vue. https://www.npmjs.com/package/@webview-bridge/react https://www.npmjs.com/package/@webview-bridge/vue

https://gronxb.github.io/webview-bridge/shared-state/react-native.html

Changed @webview-bridge/web

linkNativeMethod has been deprecated. Please use linkBridge instead. It works exactly like the old linkNativeMethod, just renamed with added shared state. However, keeping the existing one doesn't stop the behavior.

- const bridge = linkNativeMethod<AppBridge>({
+ const bridge = linkBridge<AppBridge>({
  throwOnError: true,
  onReady: () => {
    console.log("bridge is ready");
  },
});