Rename hooks

Author: inokawa

README.md

@@ -25,8 +25,8 @@ The communication between React app and React Native app will be also simplified
   - `.js`, `.ts`, `.jsx`, `.tsx`, `.mjs` and `.cjs` will be packed into one source.
   - NOTE: Only the edits in the entry file of web will invoke rebuild because of the limitation of [metro](https://github.com/facebook/metro)'s build process.
 - Handle communication between React Native and WebView with React hook style
-  - With `useBridge` hook, you can subscribe messages from WebView.
-  - With `useSubscribe` hook, you can subscribe messages from React Native.
+  - With `useWebViewMessage` hook, you can subscribe messages from WebView.
+  - With `useNativeMessage` hook, you can subscribe messages from React Native.
   - `emit` function sends message.
 - Support bundling some assets in web side with [ES6 import syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
   - `.json` is imported as an object, like require in Node.js.
@@ -117,7 +117,7 @@ import React, { useState } from "react";
 import {
   webViewRender,
   emit,
-  useSubscribe,
+  useNativeMessage,
 } from "react-native-react-bridge/lib/web";
 // Importing css is supported
 import "./example.css";
@@ -126,8 +126,8 @@ import image from "./foo.png";
 
 const Root = () => {
   const [data, setData] = useState("");
-  // useSubscribe hook receives message from React Native
-  useSubscribe((message) => {
+  // useNativeMessage hook receives message from React Native
+  useNativeMessage((message) => {
     if (message.type === "success") {
       setData(message.data);
     }
@@ -160,13 +160,13 @@ export default webViewRender(<Root />);
 
 import React from "react";
 import WebView from "react-native-webview";
-import { useBridge } from "react-native-react-bridge";
+import { useWebViewMessage } from "react-native-react-bridge";
 import webApp from "./WebApp";
 
 const App = () => {
-  // useBridge hook create props for WebView and handle communication
+  // useWebViewMessage hook create props for WebView and handle communication
   // The argument is callback to receive message from React
-  const { ref, onMessage, emit } = useBridge((message) => {
+  const { ref, onMessage, emit } = useWebViewMessage((message) => {
     // emit sends message to React
     //   type: event name
     //   data: some data which will be serialized by JSON.stringify

src/bridge.ts

@@ -6,7 +6,9 @@ import WebView, {
 import { EVENT_KEY } from "./common";
 import { Message } from "./types";
 
-export const useBridge = <T>(onSubscribe: (message: Message<T>) => void) => {
+export const useWebViewMessage = <T>(
+  onSubscribe: (message: Message<T>) => void
+) => {
   const ref = useRef<WebView>(null);
   const onMessage: WebViewProps["onMessage"] = useCallback(
     (event: WebViewMessageEvent) => {

src/index.ts

@@ -1,2 +1,2 @@
 export type { Message } from "./types";
-export { useBridge } from "./bridge";
+export { useWebViewMessage } from "./bridge";

src/plugin/__snapshots__/index.spec.js.snap

@@ -12,7 +12,7 @@ export const emit = <T>(message: Message<T>) => {
   (window as any).ReactNativeWebView.postMessage(JSON.stringify(message));
 };
 
-export const buildUseSubscribe = (
+export const buildUseNativeMessage = (
   useEffect: (cb: () => void, deps: any[]) => void
 ) => {
   return <T>(onSubscribe: (message: Message<T>) => void) => {

src/plugin/__snapshots__/metro.spec.js.snap

@@ -1 +1 @@
-export { webViewRender, emit, useSubscribe } from "./react";
+export { webViewRender, emit, useNativeMessage } from "./react";

src/web/bridge.ts

@@ -1,9 +1,9 @@
 import { useEffect } from "preact/compat";
 import { render, ComponentChild } from "preact";
-import { buildRender, buildUseSubscribe } from "./bridge";
+import { buildRender, buildUseNativeMessage } from "./bridge";
 
 export const webViewRender = buildRender<ComponentChild>(render);
 
 export { emit } from "./bridge";
 
-export const useSubscribe = buildUseSubscribe(useEffect);
+export const useNativeMessage = buildUseNativeMessage(useEffect);

src/web/index.ts

@@ -1,9 +1,9 @@
 import { ReactNode, useEffect } from "react";
 import { render } from "react-dom";
-import { buildRender, buildUseSubscribe } from "./bridge";
+import { buildRender, buildUseNativeMessage } from "./bridge";
 
 export const webViewRender = buildRender<ReactNode>(render);
 
 export { emit } from "./bridge";
 
-export const useSubscribe = buildUseSubscribe(useEffect);
+export const useNativeMessage = buildUseNativeMessage(useEffect);