Registry / communication / reactrpc

reactrpc

JSON →
library1.0.5jsnpmunverified

ReactRPC is a full-feature integration library for gRPC-Web into React applications, currently at version 1.0.5 (2023). It provides a set of React hooks and components that simplify connecting to gRPC services from a React frontend, handling bidirectional streaming, and managing state with built-in support for Redux. Unlike manual gRPC-Web client setup, it offers a declarative approach with auto-generated hooks based on protobuf definitions. The library targets developers building real-time applications with gRPC-Web and React, and its release cadence is mature but infrequent.

communication
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

ESM-only package; CJS require() is not supported. Use ESM imports.

import { GrpcProvider } from 'reactrpc'

useGrpcClient is a named export, not default. TypeScript definitions are included.

import { useGrpcClient } from 'reactrpc'

GrpcStream is a component exported from the main entry, not a subpath. Available from root.

import { GrpcStream } from 'reactrpc'

Sets up a gRPC-Web client with a React provider, then calls a unary RPC method using the useGrpcUnary hook, showing loading and error states.

import React from 'react'; import { GrpcProvider, useGrpcClient, useGrpcUnary } from 'reactrpc'; import { createGrpcClient } from 'reactrpc'; const clientConfig = { baseURL: process.env.GRPC_URL ?? 'http://localhost:8080', protoPath: './path/to/service.proto', // or use protoLoader serviceName: 'MyService' }; function App() { const client = createGrpcClient(clientConfig); return ( <GrpcProvider client={client}> <MyComponent /> </GrpcProvider> ); } function MyComponent() { const { data, error, loading, call } = useGrpcUnary('myMethod'); React.useEffect(() => { call({ param1: 'value' }); }, []); if (loading) return <div>Loading...</div>; if (error) return <div>Error: {error.message}</div>; return <div>Result: {JSON.stringify(data)}</div>; }
Debug
Known footguns
gotchaThe library uses protobufjs for message serialization; mismatched protobuf versions between server and client can cause silent failures.
gotchaGrpcProvider expects a client created by createGrpcClient; passing an incompatible client may lead to runtime errors.
deprecatedThe package is no longer actively maintained; significant updates and support for newer React versions may be missing.
gotchaESM-only package; using CommonJS require() will throw an error.
Upgrade
Version history

Breaking-change detection hasn't run for this library yet.

Audit
Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity
0 hits · last 30 days

No traffic data recorded yet.

Resources