Smart-context NPM

Highlights

Lightweight
Zero setup. No boilerplate
100% config driven
Async actions
Extend with plugins
Multiple stores/contexts
Easy Debugging
Typescript support

Installation

npm

npm install smart-context

yarn

yarn add smart-context

Quick start in 3 steps

Create store

You can create multiple stores. All stores must have a unique name.

// store.js

// Create initial state
const initialState = { name: '' }

// Create actions
const actionsConfig = {
  setName: ['name'],
}

// Provide a good name
const displayName = 'myContext'

// Setup is done! Export config
export default {
  initialState,
  actionsConfig,
  displayName,
}

Plugin `smart-context`

// Wrap root component in smart-context HOC
import React from 'react'
import { WithContextProvider } from 'smart-context'

import Config from './store'

const App = ({ children }) => <div id="app-container">{children}</div>

export default WithContextProvider(App, [Config])

Access store

// myAwesomeComponent.jsx

import React from 'react'
import { useSmartContext } from 'smart-context'

const MyAwesomeComponent = () => {
  const {
    state: { name },
    actions: { setName, reset },
  } = useSmartContext('myContext')

  const clickHandler = () => {
    setName({ name: 'smart-context' })
  }

  const resetHandler = () => {
    reset()
  }

  return (
    <>
      <button onClick={clickHandler}>Say Hi</button>
      <button onClick={resetHandler}>Reset</button>
      {name ? <h1>Hi, {name}</h1> : null}
    </>
  )
}

export default MyAwesomeComponent