jamiebuilds / Create React Context
Licence: mit
Polyfill for the proposed React context API
Stars: ✭ 689
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Create React Context
mini-create-react-context
(A smaller) polyfill for the react context API
Stars: ✭ 34 (-95.07%)
Mutual labels: polyfill, context
React Af
Allows you to code using certain React.next features today! Perfect for component library maintainers.
Stars: ✭ 143 (-79.25%)
Mutual labels: context, polyfill
Webappsec Trusted Types
A browser API to prevent DOM-Based Cross Site Scripting in modern web applications.
Stars: ✭ 424 (-38.46%)
Mutual labels: polyfill
Polyfill Ctype
This component provides a partial, native PHP implementation for the Ctype extension.
Stars: ✭ 3,774 (+447.75%)
Mutual labels: polyfill
Text Encoding
Polyfill for the Encoding Living Standard's API
Stars: ✭ 629 (-8.71%)
Mutual labels: polyfill
Css Paint Polyfill
CSS Custom Paint / Paint Worklet polyfill with special browser optimizations.
Stars: ✭ 575 (-16.55%)
Mutual labels: polyfill
Undom
🍩 1kb minimally viable DOM Document implementation
Stars: ✭ 496 (-28.01%)
Mutual labels: polyfill
React Lifecycles Compat
Backwards compatibility polyfill for React class components
Stars: ✭ 457 (-33.67%)
Mutual labels: polyfill
Polyfill Library
NodeJS module to create polyfill bundles tailored to individual user-agents.
Stars: ✭ 404 (-41.36%)
Mutual labels: polyfill
Transmittable Thread Local
📌 TransmittableThreadLocal (TTL), the missing Java™ std lib(simple & 0-dependency) for framework/middleware, provide an enhanced InheritableThreadLocal that transmits values between threads even using thread pooling components.
Stars: ✭ 4,678 (+578.96%)
Mutual labels: context
Object Fit Polyfill
A Javascript polyfill for browsers that don't support the object-fit CSS property.
Stars: ✭ 493 (-28.45%)
Mutual labels: polyfill
Jsbi
JSBI is a pure-JavaScript implementation of the official ECMAScript BigInt proposal.
Stars: ✭ 663 (-3.77%)
Mutual labels: polyfill
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>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].