A template for a React context with a safe hook accessor

template-context.tsx

import React from "react";

export interface TemplateContextProps {
    templateValue: any;
}

export const TemplateContext = React.createContext<TemplateContextProps | undefined>(undefined);

export const TemplateContextProvider: React.FunctionComponent<{
    initialTemplateValue: any
}> = ({
    initialTemplateValue, children
}) => {
    const [templateValue, setTemplateValue,] = React.useState(initialTemplateValue);

    const contextValue = React.useMemo(() => ({
        templateValue,
    }), [
        templateValue,
    ]);
    return <TemplateContext.Provider
        value={contextValue}
        children={children}
    />;
}

export const useTemplateContext = (): TemplateContextProps => {
    const contextValue = React.useContext(TemplateContext);
    if (!contextValue) {
        throw new Error("Tried to use template context from outside the provider");
    }
    return contextValue;
};