JSPM – @substrate/react-context@0.7.2

Package Exports

@substrate/react-context

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@substrate/react-context) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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