{"id":10681,"library":"create-react-context","title":"React Legacy Context Polyfill","description":"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.","status":"abandoned","version":"0.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/thejameskyle/create-react-context","tags":["javascript","react","context","contextTypes","polyfill","ponyfill","typescript"],"install":[{"cmd":"npm install create-react-context","lang":"bash","label":"npm"},{"cmd":"yarn add create-react-context","lang":"bash","label":"yarn"},{"cmd":"pnpm add create-react-context","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for runtime type checking, as used by React components.","package":"prop-types","optional":false},{"reason":"Core React library is a peer dependency; this package polyfills its context API.","package":"react","optional":false}],"imports":[{"note":"The primary function is exported as the default export.","wrong":"import { createReactContext } from 'create-react-context';","symbol":"createReactContext","correct":"import createReactContext from 'create-react-context';"},{"note":"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.","symbol":"Context (Type)","correct":"import { type Context } from 'create-react-context';"},{"note":"For CommonJS environments, the package exports the function directly as the module.exports.","wrong":"const { createReactContext } = require('create-react-context');","symbol":"createReactContext (CommonJS)","correct":"const createReactContext = require('create-react-context');"}],"quickstart":{"code":"import React, { useState, type ReactNode } from 'react';\nimport createReactContext, { type Context } from 'create-react-context';\n\ntype Theme = 'light' | 'dark';\nconst ThemeContext: Context<Theme> = createReactContext('light');\n\nfunction ThemeToggler({ children }: { children: ReactNode }) {\n  const [theme, setTheme] = useState<Theme>('light');\n\n  const toggleTheme = () => {\n    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));\n  };\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <button onClick={toggleTheme}>\n        Toggle theme (current: {theme})\n      </button>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nfunction Title({ children }: { children: ReactNode }) {\n  return (\n    <ThemeContext.Consumer>\n      {theme => (\n        <h1 style={{ color: theme === 'light' ? '#000' : '#fff' }}>\n          {children}\n        </h1>\n      )}\n    </ThemeContext.Consumer>\n  );\n}\n\n// Example usage in an App component\nfunction App() {\n    return (\n        <ThemeToggler>\n            <Title>Hello Context!</Title>\n        </ThemeToggler>\n    );\n}\n\nexport default App;","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=0.3.0"},{"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>`.","message":"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.","severity":"gotcha","affected_versions":"<16.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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>`.","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.","error":"A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object."}],"ecosystem":"npm"}