Socket
Socket
Sign inDemoInstall

mini-create-react-context

Package Overview
Dependencies
9
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

mini-create-react-context

Smaller Polyfill for the proposed React context API


Version published
Maintainers
1
Weekly downloads
1,783,748
decreased by-25.83%

Weekly downloads

Package description

What is mini-create-react-context?

The mini-create-react-context package is a smaller implementation of the React Context API. It provides a way to pass data through the component tree without having to pass props down manually at every level. This package is particularly useful for managing state in a global context, such as theming, localization, or user authentication data.

What are mini-create-react-context's main functionalities?

Creating a context

This feature allows you to create a new context object. You can provide a default value that can be used when a component does not have a matching Provider above it in the tree.

{"import createReactContext from 'mini-create-react-context';\nconst MyContext = createReactContext(defaultValue);"}

Provider Component

The Provider component is used to wrap a part of your application where you want the context to be accessible. It accepts a 'value' prop that will be passed down to consuming components.

{"import React from 'react';\nimport { MyContext } from './MyContext';\n\nconst App = () => (\n  <MyContext.Provider value={/* some value */}>\n    {/* children components that can consume the context */}\n  </MyContext.Provider>\n);"}

Consumer Component

The Consumer component is used to access the context value provided by the nearest Provider above in the tree. It uses a render prop to provide the context value to your component.

{"import React from 'react';\nimport { MyContext } from './MyContext';\n\nconst MyComponent = () => (\n  <MyContext.Consumer>\n    {value => /* render something based on the context value */}\n  </MyContext.Consumer>\n);"}

Other packages similar to mini-create-react-context

Readme

Source

mini-create-react-context

npm install size npm bundle size npm

(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:

originalmini
install size50 kB140 kB
minified3.3 kB2.3kB
minzip1.3 kB1.0kB

Keywords

FAQs

Last updated on 22 Oct 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc