@substrate/react-context
v0.7.2
Published
Wrapper to connect React components to PolkadotJS Api
Downloads
8
Readme
Available Scripts
This repo contains a set of utilities provided as react context.
Usage example
With Polkadot-js api
in your App.jsx (or App.tsx)
import { ApiPromiseContextProvider } from '@substrate/react-context';
const WS_PROVIDER = process.env.REACT_APP_WS_PROVIDER;
const App = () => {
if (!WS_PROVIDER) {
console.error('REACT_APP_WS_PROVIDER not set');
return null;
}
const provider = new WsProvider(WS_PROVIDER);
return (
<ApiPromiseContextProvider provider={provider}>
<MainApp />
</ApiPromiseContextProvider>
);
};
Then you can access the api anywhere in your app using the hook useContext(ApiPromiseContext)
:
import { ApiPromiseContext } from '@substrate/react-context';
export default function () {
// get the api and the isApiReady flag
const { api, isApiReady } = useContext(ApiPromiseContext);
useEffect(() => {
// return early if the api is not ready
if (!isApiReady) {
return;
}
let unsubscribe: () => void;
// use the api
api.derive.chain.bestNumber((number) => {
setCurrentBlock(number);
})
.then(unsub => {unsubscribe = unsub;})
.catch(e => console.error(e));
return () => unsubscribe && unsubscribe();
}, [api, isApiReady]);
}