jamiebuilds/create-react-context


Polyfill for the proposed React context API

License: Other

Language: JavaScript

Keywords: context, contexttypes, polyfill, react


create-react-context

Polyfill for the proposed React context API

Install

yarn add 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 '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>

Project Statistics

Sourcerank 12
Repository Size 283 KB
Stars 572
Forks 46
Watchers 13
Open issues disabled
Dependencies 645
Contributors 11
Tags 11
Created
Last updated
Last pushed

Top Contributors See all

Jamie Kyle Donavon West Filipp Riabchun Darius Tall Mateusz Burzyński Nikolay AugustinLF Iddan Aaronsohn Timur Khazamov Florent Cailhol Jason Miller

Packages Referencing this Repo

create-react-context
Polyfill for the proposed React context API
Latest release 0.2.3 - Updated - 572 stars

Recent Tags See all

v0.2.3 August 27, 2018
v0.2.2 April 13, 2018
v0.2.1 February 27, 2018
v0.2.0 February 26, 2018
v0.1.6 February 02, 2018
v0.1.5 February 01, 2018
v0.1.4 January 16, 2018
v0.1.3 January 07, 2018
v0.1.2 December 08, 2017
v0.1.1 December 08, 2017
v0.1.0 December 08, 2017

Interesting Forks See all

ant-design/create-react-context
Polyfill for the proposed React context API
JavaScript - MIT - Last pushed - 4 stars - 4 forks

Something wrong with this page? Make a suggestion

Last synced: 2018-04-19 12:38:36 UTC

Login to resync this repository