Context.provide

An HOC. Wraps the given component in the Context's Provider.

Note that unlike Context.consume() and inject(), this HOC is not curried.

const enhancer = compose(
  Context.provide, // Not curried!
  Context.consume('store') // Curried
)

Note that this example is equivalent to:

const enhancer = Context.inject('store')

Definition

(component: ComponentType) => Component

component – a React component. Will be wrapped in the Context's Provider.

Example

import React from 'react'
import { createContext } from 'react-zedux'
import { createStore } from 'zedux'

const Context = createContext(createStore())

const Todos = Context.provide(
  () => (
    <>
      <AddTodo />
      <TodoList />
      <Filters />
    </>
  )
)

This example is exactly equivalent to:

import React from 'react'
import { createContext } from 'react-zedux'
import { createStore } from 'zedux'

const Context = createContext(createStore())

const Todos = () => (
  <Context.Provider>
    <AddTodo />
    <TodoList />
    <Filters />
  </Context.Provider>
)

Notes

You won't use Context.provide much. Most of its use cases are covered by Context.inject() and Context.Provider. In fact, this HOC is the least useful thing in all of React Zedux. Poor thing.