Skip to main content

Getting Started

Installation​

npm

npm install smart-context

yarn

yarn add smart-context

Quick start in 3 steps​

1. Create store​

// 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,
}

2. 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])

3. Access store​

// myAwesomeComponent.jsx

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

const MyAwesomeComponent = () => {
  // Access context via displayName
  const {
    state: { name },
    actions: { setName },
  } = useSmartContext('myContext')

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

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

export default MyAwesomeComponent