smart-context

React state management made easy

https://smart-context.netlify.app

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

Documentation

Visit website for full documentation and demo.

Contributing

Refer Contributing Guide.

License

MIT licensed.