https://github.com/gronxb/webview-bridge

Fully Type-Safe Integration for React Native WebView and Web
https://github.com/gronxb/webview-bridge

react-native react-native-webview react-native-webview-bridge state-management

Last synced: about 11 hours ago
JSON representation

Fully Type-Safe Integration for React Native WebView and Web

• Host: GitHub
• URL: https://github.com/gronxb/webview-bridge
• Owner: gronxb
• License: mit
• Created: 2023-10-04T16:00:21.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-21T15:14:09.000Z (about 1 month ago)
• Last Synced: 2025-01-16T03:11:14.695Z (8 days ago)
• Topics: react-native, react-native-webview, react-native-webview-bridge, state-management
• Language: TypeScript
• Homepage: https://gronxb.github.io/webview-bridge/
• Size: 40.8 MB
• Stars: 268
• Watchers: 7
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


  



# webview-bridge

[![NPM](https://img.shields.io/npm/v/%40webview-bridge%2Freact-native/latest?label=%40webview-bridge%2Freact-native)](https://www.npmjs.com/package/@webview-bridge/react-native)

[![NPM](https://img.shields.io/npm/v/%40webview-bridge%2Fweb/latest?label=%40webview-bridge%2Fweb)](https://www.npmjs.com/package/@webview-bridge/web)

[![NPM](https://img.shields.io/npm/v/%40webview-bridge%2Freact/latest?label=%40webview-bridge%2Freact)](https://www.npmjs.com/package/@webview-bridge/react)

**Fully Type-Safe Integration for React Native WebView and Web**

`webview-bridge` is a powerful interface that acts as a bridge between React Native and web applications using `react-native-webview`. It providing seamless interaction and ensuring type safety.

Inspired by the functionality of `tRPC`, `webview-bridge` simplifies the communication process between `react-native-webview` and web applications.

**Key Features:**

- Built upon `react-native-webview`.

- Designed with zero external dependencies (except for `react-native-webview`).

- Type-Safety

- Backward Compatibility

- No App Review Needed

- Shared State

![webview-bridge](https://raw.githubusercontent.com/gronxb/webview-bridge/main/demo.gif)

## Documentation

visit [Docs](https://gronxb.github.io/webview-bridge)

## Example

visit [Example](https://github.com/gronxb/webview-bridge/tree/main/example)

## Exporting Type Declarations

To enhance your experience with webview-bridge, it's recommended to export the type declaration of the native bridge object to the web application. Here are a few ways to achieve this:

1. [Monorepo Setup (Recommended)](https://gronxb.github.io/webview-bridge/exporting-type-declarations/monorepo): Use a monorepo setup to export the type of the native bridge.

2. [Custom Declaration File](https://gronxb.github.io/webview-bridge/exporting-type-declarations/custom-declaration-file): Build a bridge declaration file using tsc and move the file as needed.

3. Private npm Registry: Utilize a private npm registry to export the type of the native bridge.

## Contributor Guide

If you would like to contribute to webview-bridge by submitting bug fixes or performance improvements, please refer to our [CONTRIBUTING.md](https://github.com/gronxb/webview-bridge/blob/main/CONTRIBUTING.md) guide for detailed instructions. We welcome and appreciate your contributions.