React Legacy Context Polyfill

0.3.0 · abandoned · verified Sun Apr 19

The `create-react-context` package provides a polyfill, or more accurately, a ponyfill, for the modern React Context API (`React.createContext`) introduced in React 16.3.0. It allows applications running on older versions of React (specifically React 0.14.0, 15.0.0, and pre-16.3.0 versions of React 16) to utilize the `Provider` and `Consumer` pattern for prop drilling and state management, mimicking the official API's behavior. The current stable version is 0.3.0, and given its nature as a polyfill for a now-native feature, it is unlikely to receive significant new feature development; its release cadence is effectively dormant. Its primary differentiation was enabling forward-compatible context usage before React 16.3 became widespread, bridging the gap for applications migrating or needing modern context features in legacy environments, while explicitly *not* polyfilling other React 16+ APIs.

Common errors

```
A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
```
cause Providing multiple direct children to the `<Context.Provider>` component when using an older React version (prior to React 16.0), which expects only a single child.

fix Ensure that `<Context.Provider>` always receives a single child element. If you need to render multiple components, wrap them in a single `div` or similar parent element: `<Context.Provider><div><Child1/><Child2/></div></Context.Provider>`.

Warnings

breaking This package is a polyfill for the `React.createContext` API introduced in React 16.3.0. For React versions 16.3 and above, you should use `React.createContext` directly from the `react` package, as this polyfill is no longer necessary and could cause compatibility issues or unnecessary bundle size.
Fix: Remove `create-react-context` from your project and replace all imports from `'create-react-context'` with direct usage of `React.createContext` from the `react` package.
gotcha When using this polyfill with React versions prior to 16.0, the `<Context.Provider>` component can only accept a single child element. Providing multiple direct children will result in a runtime error.
Fix: Wrap multiple children within a single parent element (e.g., a `div` or `React.Fragment` if available in your React version) inside the `<Context.Provider>`.

Install

npm install create-react-context npm
yarn add create-react-context yarn
pnpm add create-react-context pnpm

Imports

createReactContext

wrong:

import { createReactContext } from 'create-react-context';

correct:

import createReactContext from 'create-react-context';

The primary function is exported as the default export.

Context (Type)
```
import { type Context } from 'create-react-context';
```
Used for Flow/TypeScript type annotations of the context object. For TypeScript, `import type { Context } from 'create-react-context';` or `import { Context } from 'create-react-context';` are both valid depending on TS version and config.
createReactContext (CommonJS)
wrong:
```
const { createReactContext } = require('create-react-context');
```
correct:
```
const createReactContext = require('create-react-context');
```
For CommonJS environments, the package exports the function directly as the module.exports.

Quickstart

Demonstrates how to create a context, provide a value with `Context.Provider`, and consume it with `Context.Consumer` using a simple theme toggler example, adapted for TypeScript.

import React, { useState, type ReactNode } from 'react';
import createReactContext, { type Context } from 'create-react-context';

type Theme = 'light' | 'dark';
const ThemeContext: Context<Theme> = createReactContext('light');

function ThemeToggler({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={theme}>
      <button onClick={toggleTheme}>
        Toggle theme (current: {theme})
      </button>
      {children}
    </ThemeContext.Provider>
  );
}

function Title({ children }: { children: ReactNode }) {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <h1 style={{ color: theme === 'light' ? '#000' : '#fff' }}>
          {children}
        </h1>
      )}
    </ThemeContext.Consumer>
  );
}

// Example usage in an App component
function App() {
    return (
        <ThemeToggler>
            <Title>Hello Context!</Title>
        </ThemeToggler>
    );
}

export default App;

view raw JSON →