Registry / serialization / create-react-context

create-react-context

library0.3.0jsnpmunverified

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.

serialization

npm install create-react-context

github ↗package ↗

INSTALL

IMPORT

SIG · CREATE-REACT-CONTE

create-react-context

serializationjavascriptv0.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createReactContext

✓ import createReactContext from 'create-react-context';

✗ 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)

✓ const createReactContext = require('create-react-context');

✗ const { createReactContext } = require('create-react-context');

For CommonJS environments, the package exports the function directly as the module.exports.

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;

Debug

Known issues

breakingThis 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.

affects: >=0.3.0

gotchaWhen 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>`.

affects: <16.0.0

Errors

Common errors & fixes

A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

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>`.

Upgrade

Version history

0.3.0latest on npm

Audit

Dependencies

prop-typesrequiredRequired peer dependency for runtime type checking, as used by React components.

reactrequiredCore React library is a peer dependency; this package polyfills its context API.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/thejameskyle/create-react-context ↗

packagehttps://www.npmjs.com/package/create-react-context ↗