@substrate/react-context

Wrapper to connect React components to PolkadotJS Api

Usage no npm install needed!

<script type="module">
  import substrateReactContext from 'https://cdn.skypack.dev/@substrate/react-context';
</script>

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]);
}