How to use create-react-context - 10 common examples

export const RCREContext = createReactContext({
    $global: {},
    $location: URL.parse(''),
    lang: '',
    $query: {},
    debug: false,
    // lang: PropsTypes.string,
    events: new Events(),
    store: createReduxStore(),
    options: {},
    mode: 'React',
    containerGraph: new Map()
});

export const ComponentContext = createReactContext({
    model: '',
    $data: null,
    $tmp: null,
    dataCustomer: new DataCustomer(),
    setData: (name: string, value: any) => {},
    getData: (nameStr: string, props: any, isTmp?: boolean) => {},
    deleteData: (name: string, isTmp?: boolean) => {},
    setMultiData: (items: { name: string, value: any, isTmp: boolean }[]) => {}
});

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import createContext from 'create-react-context'

export const Context = createContext()

// export const contextPropTypes = {
// 	menuIsExpanded     : PropTypes.bool.isRequired,
// 	toggleMenu         : PropTypes.func.isRequired,
// 	registerMenu       : PropTypes.func.isRequired,
// 	registerMenuButton : PropTypes.func.isRequired,
// 	setTogglerCooldown : PropTypes.func.isRequired,
// 	getTogglerNode     : PropTypes.func.isRequired
// }

export default class PageAndMenu extends Component {
	constructor() {
		super()
		// `state` is placed here to so that it's initialized
		// after all instance methods because it references them.
		this.state = {

uikitAssets[asset as keyof typeof uikitAssets],
      ])
    );
  }
  getUrl = (assetPath: string): string =>
    `${this.publicPath}${this.assetsMap.get(assetPath) || 'notfound'}`;
}

const DefaultLink = (
  props: React.DetailedHTMLProps<
    React.AnchorHTMLAttributes,
    HTMLAnchorElement
  >
) =&gt; <a>;

const UikitContext: Context = createContext(new Uikit('/', DefaultLink));
const UikitProvider = UikitContext.Provider;

interface Props {
  children: React.ReactElement;
}

const Provider: React.FunctionComponent = props =&gt; (
  
    {props.children}
  
);

export default Provider;
</a>

import createReactContext from 'create-react-context';
import { Tab } from './Tab';
import { emptyHandler } from '../../lib/utils';

export interface TabsContextType {
  vertical: boolean;
  activeTab: string;
  getTab: (id: string) => Tab | null | void;
  addTab: (id: string, getNode: () => Tab) => void;
  notifyUpdate: () => void;
  removeTab: (id: string) => void;
  shiftFocus: (fromTab: string, delta: number) => void;
  switchTab: (id: string) => void;
}

export const TabsContext = createReactContext({
  vertical: false,
  activeTab: '',
  getTab: emptyHandler,
  addTab: emptyHandler,
  notifyUpdate: emptyHandler,
  removeTab: emptyHandler,
  shiftFocus: emptyHandler,
  switchTab: emptyHandler,
});

import createReactContext from 'create-react-context';

const NavigationContext = createReactContext();

export const NavigationProvider = NavigationContext.Provider;
export const NavigationConsumer = NavigationContext.Consumer;

export default {
  NavigationProvider,
  NavigationConsumer,
};

Ref,
  StatelessFunctionalComponent,
  ElementType,
  ElementConfig,
} from "react";
import React, {createElement, Component} from "react";

import createReactContext, {type Context} from "create-react-context";

import {addDebugMetadata, DebugEngine} from "./dev-tool.js";

export {DebugEngine};

const StyletronContext: Context = createReactContext();

const HydrationContext: Context = createReactContext(false);

const DebugEngineContext: Context = createReactContext();

class DevProvider extends Component {
  constructor(props: any) {
    super();
    this.state = {
      hydrating: Boolean(props.debugAfterHydration),
    };
  }

  componentDidMount() {
    if (__BROWSER__) {
      if (this.state.hydrating === true) {
        this.setState({hydrating: false});
      }

import * as React from 'react';
import createReactContext from 'create-react-context';

const LayoutContext = createReactContext(null);

export const LayoutProvider = LayoutContext.Provider;
export const LayoutConsumer = LayoutContext.Consumer;
export const createConsumer = (Component: any) => (props: any) => (
  
    {(context: any) => (
      
    )}
  
);

throw new Error(message);
        }
        return ;
      }}
    
  );

  if (process.env.NODE_ENV !== 'production') {
    WithYMapsContext.displayName = `withYMapsContext(${displayName})`;
  }

  return WithYMapsContext;
};

export const ParentContext = createReactContext(null);

export const withParentContext = Component => {
  const WithParentContext = props => (
    
      {parent => }
    
  );

  if (process.env.NODE_ENV !== 'production') {
    WithParentContext.displayName = `withParentContext(${name(Component)})`;
  }

  return WithParentContext;
};

export default function createStateContext(actions = {}, initialState = null) {
  const Context = createReactContext();

  class ProviderComponent extends Component {
    render() {
      const { children } = this.props;

      const value = {
        ...this.actions,
        state: this.state,
      };

      return ;
    }

    constructor(...args) {
      super(...args);

import createReactContext, { type Context } from 'create-react-context';
import Text from './Text';
import { FormattedMessage } from 'react-intl';
import * as appError from '../lib/appError';

type Value = {|
  appError: ?appError.AppError,
  dispatchAppError: (appError: appError.AppError) => void,
|};

const value = {
  appError: null,
  dispatchAppError: () => {},
};

const AppErrorContext: Context = createReactContext(value);

export const AppErrorProvider = AppErrorContext.Provider;
export const AppErrorConsumer = AppErrorContext.Consumer;

class AppError extends React.PureComponent<{}> {
  static getAppErrorMessage = (appError: appError.AppError) => {
    switch (appError.name) {
      case 'failedToFetch':
        return (
          
        );
      case 'insufficientPermissions':
        return (