Calimero mero-react
React bindings for @calimero-network/mero-js — a context provider, hooks for every admin operation, storage helpers, and headless utility components. No external UI framework, no styled-components.
2
components
44
hooks
React
^18 | ^19
v1.1
current
Quick Start
1
Install
pnpm add @calimero-network/mero-react
Includes mero-js as a dependency — one install for everything.
2
Wrap your app
import { MeroProvider, AppMode }
from '@calimero-network/mero-react';
function App() {
return (
<MeroProvider mode={AppMode.SingleContext}>
<MyApp />
</MeroProvider>
);
}
from '@calimero-network/mero-react';
function App() {
return (
<MeroProvider mode={AppMode.SingleContext}>
<MyApp />
</MeroProvider>
);
}
3
Use hooks
const { isAuthenticated, contextId } = useMero();
const { execute } = useExecute(contextId, executorId);
useSubscription([contextId], handleEvent);
const { execute } = useExecute(contextId, executorId);
useSubscription([contextId], handleEvent);
Architecture
What's exported
Provider & Context
MeroProvider
Wrap your app — creates the SDK instance and auth context
useMero
Primary hook — SDK instance, auth state, connection controls
AppMode
Enum: SingleContext, MultiContext, Admin
ConnectionType
Enum: Remote, Local, RemoteAndLocal, Custom
Key Hooks
useExecute
Execute WASM methods with loading/error state
useSubscription
Subscribe to SSE events with lifecycle management
useContexts
List contexts for an application
useGroupInfo
Fetch group metadata
useNamespaces
List all namespaces