How to use the react.createContext function in react

internalApiKey: action.data,
      }
    }
    case SET_EXTERNAL_KEY: {
      return {
        ...state,
        externalApiKey: action.data,
      }
    }
    default:
      return state
  }
}

const SettingsStateContext = React.createContext()
const SettingsDispatchContext = React.createContext()

// eslint-disable-next-line react/prop-types
function SettingsProvider({children}) {
  const firstRun = global.isFirstRun

  const [state, dispatch] = usePersistence(
    useLogger(
      React.useReducer(settingsReducer, loadState('settings') || initialState)
    ),
    'settings'
  )

  const [showTransferModal, toggleTransferModal] = useState(false)

  useEffect(() => {
    if (!state.initialized) {

import React from "react";

export interface Context {
  [key: string]: unknown | undefined;
}

export interface CesiumProp {
  cesium: C;
}

export type WithContextProps = P & CesiumProp;
export type WithContextType = React.ComponentType>;

export const CesiumContext = React.createContext({});
export const { Provider, Consumer } = CesiumContext;

export const withCesium = (Component: WithContextType) =>
  // supports both functional components and class components
  // eslint-disable-next-line react/display-name
  React.forwardRef, P>(
    (props: P & { children?: React.ReactNode }, ref?: React.Ref> | null) => (
      
        {(value: any) => }
      
    ),
  );

case exports.TestModelEnums.TestModel_setCartNewItem:
                (new RTestModel(draft)).setCartNewItem(action.payload);
                break;
            case exports.TestModelEnums.TestModel_addToCartRandom:
                (new RTestModel(draft)).addToCartRandom();
                break;
            case exports.TestModelEnums.TestModel_renameLast:
                (new RTestModel(draft)).renameLast(action.payload);
                break;
        }
    });
};
/***************************
* React Context API test   *
***************************/
exports.TestModelContext = React.createContext(null);
var TestModelStore = /** @class */ (function (_super) {
    __extends(TestModelStore, _super);
    function TestModelStore(props) {
        var _this = _super.call(this, props) || this;
        _this.state = init_TestModel();
        _this.setUserMessage = _this.setUserMessage.bind(_this);
        _this.add = _this.add.bind(_this);
        _this.removeFirst = _this.removeFirst.bind(_this);
        _this.sort = _this.sort.bind(_this);
        _this.addCart = _this.addCart.bind(_this);
        _this.addCartSync = _this.addCartSync.bind(_this);
        _this.addToCart = _this.addToCart.bind(_this);
        _this.setCartNewItem = _this.setCartNewItem.bind(_this);
        _this.addToCartRandom = _this.addToCartRandom.bind(_this);
        _this.renameLast = _this.renameLast.bind(_this);
        _this.createItem = _this.createItem.bind(_this);

import React, { useState, useEffect, createContext } from 'react'
import PropTypes from 'prop-types'
import DiscussionsApi from './DiscussionsApi'
import useHandshake from './useHandshake'

export const DiscussionsContext = createContext({})

const Discussions = ({ children, app }) => {
  const [hasInit, setHasInit] = useState(false)
  const [discussions, setDiscussions] = useState({})
  const [discussionApi, setDiscussionApi] = useState({})
  const { handshakeOccured } = useHandshake()

  useEffect(() => {
    const initDiscussions = async () => {
      const api = new DiscussionsApi(app)
      await api.init()
      const discussionData = await api.collect()
      setDiscussions(discussionData)
      setDiscussionApi(api)
      setHasInit(true)

primary?: boolean;
  /** Makes the ripple an accent color*/
  accent?: boolean;
  /** makes the ripple disabled */
  disabled?: boolean;
  /** For internal use */
  surface?: boolean;
}

type ActivateEventTypes<s> =
  | React.MouseEvent<s>
  | React.TouchEvent<s>
  | React.KeyboardEvent<s>
  | React.FocusEvent<s>;

const RippleSurfaceContext = React.createContext({});

/** A component for adding Ripples to other components. */
export class Ripple extends FoundationComponent&lt;
  MDCRippleFoundation,
  RippleProps
&gt; {
  static shouldDebounce = true;
  static displayName = 'Ripple';

  private root = this.createElement('root');
  private surface = this.createElement('surface');
  private isTouched = false;

  constructor(props: RippleProps) {
    super(props);
</s></s></s></s></s>

export const setAppDependencies = (deps: AppDependencies) => {
  DependenciesContext = createContext(deps);
  return DependenciesContext.Provider;
};

import React from 'react';

const ReactPlayerContext = React.createContext([{}, () => {}]);

export default ReactPlayerContext;

/*
 * A higher-order component that adds a FloatingLayer adjacent to wrapped component.
 */

import {call, forEventProp, oneOf} from '@enact/core/handle';
import hoc from '@enact/core/hoc';
import Registry from '@enact/core/internal/Registry';
import React from 'react';

const forAction = forEventProp('action');

const FloatingLayerContext = React.createContext();

/**
 * Default config for {@link ui/FloatingLayer.FloatingLayerDecorator}.
 *
 * @memberof ui/FloatingLayer.FloatingLayerDecorator
 * @hocconfig
 */
const defaultConfig = {
	/**
	 * Element Id of the floatLayer
	 *
	 * @type {String}
	 * @default 'floatLayer'
	 * @public
	 * @memberof ui/FloatingLayer.FloatingLayerDecorator.defaultConfig
	 */

var ramda = require('ramda');
var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
var _objectSpread = _interopDefault(require('@babel/runtime/helpers/objectSpread'));
var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
require('core-js/modules/es6.array.filter');
var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
require('core-js/modules/es6.function.name');
var _regeneratorRuntime = _interopDefault(require('@babel/runtime/regenerator'));
require('regenerator-runtime/runtime');
var _asyncToGenerator = _interopDefault(require('@babel/runtime/helpers/asyncToGenerator'));

var isQueryPresent = (function (query) {
  return query.measures && query.measures.length || query.dimensions && query.dimensions.length || query.timeDimensions && query.timeDimensions.length;
});

var CubeContext = React.createContext(null);

var QueryRenderer =
/*#__PURE__*/
function (_React$Component) {
  _inherits(QueryRenderer, _React$Component);

  _createClass(QueryRenderer, null, [{
    key: "isQueryPresent",
    value: function isQueryPresent$$1(query) {
      return isQueryPresent(query);
    }
  }]);

  function QueryRenderer(props) {
    var _this;