<ParentSpaceProvider>

A react-redux compatible React component that will allow its children to behave as if they were not inside the nearest enclosing <SubspaceProvider>.

Props

1. context (React.Context|Object): Override the React Context used for accessing the store. An object can be passed with separate parent and child contexts if required.

Examples

React recommends using "render props" in certain situations to establish an inverted control between components. This can lead to trouble when the render props are passed to a subspaced component since any redux-connected components inside the render prop will find themselves inside a subspace that they do not wish to be in. Usually code inside a render prop is meant to execute in the environment exterior to the component with the prop.

import React from `react`
import { ParentSpaceProvider } from 'react-redux-subspace'
import ApplicationRequiringParentScope from 'some-dependency'

class MyComponent extends React.Component {
  render() {
    return (
      <ParentSpaceProvider>
        <ApplicationRequiringParentScope />
      </ParentSpaceProvider>
    )
  }
}

import React from `react`
import { ParentSpaceProvider } from 'react-redux-subspace'
import ApplicationRequiringParentScope from 'some-dependency'

const CustomContext = React.createContext()

class MyComponent extends React.Component {
  render() {
    return (
      <ParentSpaceProvider context={CustomContext}>
        <ApplicationRequiringParentScope />
      </ParentSpaceProvider>
    )
  }
}

import React from `react`
import { ParentSpaceProvider } from 'react-redux-subspace'
import ApplicationRequiringParentScope from 'some-dependency'

const CustomParentContext = React.createContext()
const CustomChildContext = React.createContext()

class MyComponent extends React.Component {
  render() {
    return (
      <ParentSpaceProvider context={{ parent: CustomParentContext, child: CustomChildContext }}>
        <ApplicationRequiringParentScope />
      </ParentSpaceProvider>
    )
  }
}