React context utils

createContext.ts

import React from 'react';

export function createContext<ContextValueType extends {} | null>(): readonly [
    () => ContextValueType,
    React.Provider<ContextValueType | undefined>,
] {
    const context = React.createContext<ContextValueType | undefined>(
        undefined,
    );

    function useContext(): ContextValueType {
        const value = React.useContext(context);

        if (value === undefined) {
            throw new Error(
                'useContext must be inside a Provider with a value',
            );
        }

        return value;
    }
    return [useContext, context.Provider] as const;
}

UserInfo.tsx

import React from "react";
import createContext from './createContext';

const [useUserInfoContext, UserInfoProviderInternal] = createContext<
    string
>();

export { useUserInfoContext };

export const UserInfoProvider: React.FC = ({ children }) => {
    const value = ""

    return (
        <UserInfoProviderInternal
            value={value}
        >
            {children}
        </UserInfoProviderInternal>
    );
};