Product
Introducing Java Support in Socket
We're excited to announce that Socket now supports the Java programming language.
mini-create-react-context
Advanced tools
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.
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);"}
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.
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 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.
(A smaller) Polyfill for the React context API
npm install mini-create-react-context
You'll need to also have react
and prop-types
installed.
const Context = createReactContext(defaultValue);
/*
<Context.Provider value={providedValue}>
{children}
</Context.Provider>
...
<Context.Consumer>
{value => children}
</Context.Consumer>
*/
// @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>
);
}
}
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>
original | mini | |
---|---|---|
install size | 50 kB | 140 kB |
minified | 3.3 kB | 2.3kB |
minzip | 1.3 kB | 1.0kB |
FAQs
Smaller Polyfill for the proposed React context API
The npm package mini-create-react-context receives a total of 1,049,696 weekly downloads. As such, mini-create-react-context popularity was classified as popular.
We found that mini-create-react-context demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.
Security News
Deno 2.0 is now available with enhanced package management, full Node.js and npm compatibility, improved performance, and support for major JavaScript frameworks.