Skip to content

Normal React context flows down. Reverse context flows up, from a descendant to a single ancestor.

Notifications You must be signed in to change notification settings

timkindberg/react-context-reverse

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-context-reverse

npm i --save-dev react-context-reverse

Similar to React.createContext() but instead of the ancestor passing data to it's descendant, the descendant passes data to a single ancestor.

Usage:

Use the createReverseContext function just like you would use the React.createContext function.

The difference is it returns a Context object with a:

  • <Context.ReverseProvider>: Component used in a child/descendant component to provide a value to the context.
  • <Context.ReverseConsumer>: Component used in the parent/ancestor component to consume the provided value from the context.

Note: I made the names ReverseProvider and ReverseConsumer to avoid confusion with a regular Provider and Consumer.

Example:

In this example, we are going to add a disabled class to a <label> if it's nested <input> is disabled.

////////////////
/* Example.js */
////////////////

import { Label } from "./Label";
import { Checkbox } from "./Checkbox";

export const Example = () => (
  <Label>
    <Checkbox disabled /> // Note: the child has some disabled state to share
    Check Me
  </Label>
);

//////////////
/* Label.js */
//////////////

import { createReverseContext } from 'react-context-reverse'

// We start by creating a reverse context to consume
// the disabled context of the child checkbox
export const DisabledContext = createReverseContext(false);

// In the parent we use the ReverseConsumer, it provides
// the value of the context via a child function
export const Label = props => (
  <DisabledContext.ReverseConsumer>
    {disabled => (
      <label {...props} className={cx("Label", disabled && "is-disabled")} />
    )}
  </DisabledContext.ReverseConsumer>
);

//////////////
/* Input.js */
//////////////

import { DisabledContext } from "./Label";

// In the child we use the ReverseProvider, we provide
// the value to the context
export const Checkbox = props => (
  <DisabledContext.ReverseProvider value={props.disabled}>
    <input {...props} type="checkbox" className="Checkbox" />
  </DisabledContext.ReverseProvider>
);

About

Normal React context flows down. Reverse context flows up, from a descendant to a single ancestor.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published