mini-create-react-context

mini-create-react-context

(A smaller) Polyfill for the React context API

Install

npm install mini-create-react-context

You'll need to also have react and prop-types installed.

API

const Context = createReactContext(defaultValue);
/*
	<Context.Provider value={providedValue}>
		{children}
	</Context.Provider>

	...

	<Context.Consumer>
		{value => children}
	</Context.Consumer>
*/

Example

// @flow
import React, { type Node } from 'react';
import createReactContext, { type Context } from 'mini-create-react-context';

type Theme = 'light' | 'dark';
// Pass a default theme to ensure type correctness
const ThemeContext: Context<Theme> = createReactContext('light');

class ThemeToggler extends React.Component<
  { children: Node },
  { theme: Theme }
> {
  state = { theme: 'light' };
  render() {
    return (
      // Pass the current context value to the Provider's `value` prop.
      // Changes are detected using strict comparison (Object.is)
      <ThemeContext.Provider value={this.state.theme}>
        <button
          onClick={() => {
            this.setState(state => ({
              theme: state.theme === 'light' ? 'dark' : 'light'
            }));
          }}
        >
          Toggle theme
        </button>
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

class Title extends React.Component<{ children: Node }> {
  render() {
    return (
      // The Consumer uses a render prop API. Avoids conflicts in the
      // props namespace.
      <ThemeContext.Consumer>
        {theme => (
          <h1 style={{ color: theme === 'light' ? '#000' : '#fff' }}>
            {this.props.children}
          </h1>
        )}
      </ThemeContext.Consumer>
    );
  }
}

Compatibility

This package only "ponyfills" the React.createContext API, not other unrelated React 16+ APIs. If you are using a version of React <16, keep in mind that you can only use features available in that version.

For example, you cannot pass children types aren't valid pre React 16:

<Context.Provider>
  <div/>
  <div/>
</Context.Provider>

It will throw A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. because <Context.Provider> can only receive a single child element. To fix the error just wrap everyting in a single <div>:

<Context.Provider>
  <div>
    <div/>
    <div/>
  </div>
</Context.Provider>

Size difference to the original:

	original	mini
install size	50 kB	140 kB
minified	3.3 kB	2.3kB
minzip	1.3 kB	1.0kB

Similar packages

Other packages similar to mini-create-react-context

react-context

This package provides a polyfill for the React Context API for older versions of React. It is similar to mini-create-react-context but is designed specifically for backward compatibility with React versions before 16.3.

create-react-context

This is another polyfill for the React Context API, created by the same author as mini-create-react-context. It has a similar API but is not as minimal, potentially including additional features or a larger bundle size.

react-broadcast

React Broadcast is a package that provides a similar functionality to the React Context API, allowing you to broadcast props down the component tree. It is an older solution that was used before the official Context API was introduced in React 16.3.