@atom-iq/context

Atom-iQ Context Middleware (@atom-iq/context)

Installing

• npm - npm install --save @atom-iq/context
• yarn - yarn add @atom-iq/context

Context

Package containing Middlewares, provides access to Context API

Middlewares:

• initContext - called on application init, provides initial root context object
• createContext - Component Middleware, creates nested Context, that will be passed to children and returns function, that's adding new fields to that Context
• context (useContext) - Component Middleware, returns function that's getting Context field by name

Tools:

• contextProvider function - factory for Context Provider Component - returns Component, that's using createContext Middleware, providing new Context with specified field or fields to children

Starting the app

import App from './App'
import { createRvDOM, combineMiddlewares } from '@atom-iq/core'
import { contextMiddleware } from '@atom-iq/ref'

const initialRootContext = {
  message: 'Atom-iQ Context Middleware'
}

const middlewares = combineMiddlewares(contextMiddleware(initialRootContext))()

createRvDOM(middlewares)(<App />, document.getElementById('root'))

Usage

import { RvdComponent, createState } from '@atom-iq/core'
import { contextProvider, WithContext, WithCreateContext } from '@atom-iq/context'

const Consumer: RvdComponent<{}, WithContext> = (_props, { context }) => (
  <section>
    {context('message')}
    {context('fromCreate')}
  </section>
)

const App: RvdComponent<{}, WithCreateContext & WithContext> = (_props, { createContext, context }) => {
  createContext('fromCreate', 'Created in App by createContext')
  
  const Nested = contextProvider({
    message: 'Nested message',
    fromCreate: 'Nested fromCreate'
  })
  
  return (
    <main class="App">
      {context('message')} // 'Atom-iQ Context Middleware' - from root
      {context('fromCreate')} // 'Created in App by createContext'
      <Consumer /> // Same as above
      <Nested>
        <Consumer /> // 'Nested message' and 'Nested fromCreate'
      </Nested>
    </main>
  )
}

Documentation

• Framework
• Reactive Virtual DOM
• Component
• Elements
• Middleware