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.