reactrpc

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

npm install reactrpc

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACTRPC

reactrpc

communicationjavascriptv1.0.5

harness data pending

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.

GrpcProvider

✓ import { GrpcProvider } from 'reactrpc'

✗ const GrpcProvider = require('reactrpc').GrpcProvider

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

useGrpcClient

✓ import { useGrpcClient } from 'reactrpc'

✗ import useGrpcClient from 'reactrpc'

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

GrpcStream

✓ import { GrpcStream } from 'reactrpc'

✗ import { GrpcStream } from 'reactrpc/components'

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

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 issues

gotchaThe library uses protobufjs for message serialization; mismatched protobuf versions between server and client can cause silent failures.

fix

Ensure the same protobuf schema file is used on both client and server, and that protobufjs version is compatible.

affects: >=0.0.0

gotchaGrpcProvider expects a client created by createGrpcClient; passing an incompatible client may lead to runtime errors.

fix

Always use the createGrpcClient function provided by reactrpc to instantiate the client, and pass it to GrpcProvider.

affects: >=1.0.0

deprecatedThe package is no longer actively maintained; significant updates and support for newer React versions may be missing.

fix

Consider alternatives like @improbable-eng/grpc-web or direct grpc-web integration if you need active maintenance or newer React compatibility.

affects: >=1.0.0

gotchaESM-only package; using CommonJS require() will throw an error.

fix

Use ES module imports (import) instead of require(). If using Node.js, ensure your project is configured for ESM.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'protoPath')

Missing or misconfigured client config object when calling createGrpcClient.

fix

Ensure you provide an object with at least 'protoPath' (or 'protoLoader') and 'serviceName' to createGrpcClient.

Error: No transport found for gRPC-Web. Ensure grpc-web is installed.

Missing grpc-web dependency, or incorrect import of grpc-web.

fix

Run 'npm install grpc-web' and ensure it is imported before using reactrpc (e.g., import 'grpc-web' at entry point).

Uncaught ReferenceError: Buffer is not defined

Missing Buffer polyfill in the browser (grpc-web or protobufjs may require it).

fix

Install and configure buffer package (npm install buffer) and add to webpack/rollup config or polyfill in browser.

Upgrade

Version history

1.0.5latest on npm

Audit

Dependencies

reactrequiredCore dependency for React components and hooks

grpc-webrequiredRequired for gRPC-Web client functionality

protobufjsrequiredUsed for protobuf message serialization

reduxoptionalOptional integration for state management

Agent activity

16 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/oslabs-beta/ReactRPC ↗

packagereactrpc ↗

homepagehttps://github.com/oslabs-beta/ReactRPC ↗