@sirse-dev/safe-context

Safe React context

Why?

React requires default value for the context. However, in some cases, default value doesn't have any meaning, because consumers cannot exist outside Provider. SafeContext lets you to have context, that could be used only inside provider. Trying to use Consumer or useSafeContext outside Provider will result in runtime error.

Install

npm install @sirse-dev/safe-context

Or

yarn add @sirse-dev/safe-context

Usage

import { createSafeContext, useSafeContext } from '@sirse-dev/safe-context';

//     This should be non-nullable type ↓      ↓ - no default value.
const SampleContext = createSafeContext<number>();

// Use it as standard context.
const App = () => {
    return (
        <SampleContext.Provider value={10}>
            {/* Some app code... */}

            <SampleContext.Consumer>{(value) => <p>{value}</p>}</SampleContext.Consumer>
            <InnerComponent />
        </SampleContext.Provider>
    );
};

// Or from hook api
const InnerComponent = () => {
    const value = useSafeContext(SampleContext);

    return <div>{value}</div>;
};

License

MIT © sirse

Created with aqu 🌊