useSafeContext

A custom hook for safely accessing a React Context.

If the Context has no default value (null/undefined), it throws an error when used outside of a Provider. If the Context has a default value, no error is thrown when used outside of a Provider — the default value is returned instead.

When no error is thrown, the hook returns a NonNullable Context value since access was safe.

Code

🔗 View source code

Interface

typescript

function useSafeContext<T>(context: Context<T>): NonNullable<T>

Parameters

Name	Type	Description
context	Context<T>	The React Context to access safely

Usage

typescript

import { useSafeContext } from '@modern-kit/react'
import { createContext } from 'react'

const ThemeContext = createContext<{ theme: string } | null>(null);
ThemeContext.displayName = 'ThemeContext';

function MyComponent() {
  // Since access is safe, a NonNullable Context value is returned.
  // context: { theme: 'dark' }
  const context = useSafeContext(ThemeContext);
  return <div>Current theme: {context.theme}</div>;
}

<ThemeContext.Provider value={{ theme: 'dark' }}>
  <MyComponent />
</ThemeContext.Provider>

Example

Current theme: dark