js401-reading

Context API

Context

• a way to pass state down through the tree in a provider/consumer relationship
• at as high a level as needed, you can make a provider
• you create a <SettingsContext.Provider> element and at the app level you can wrap that around your component

ways to get context

• wrapper and use a get function to pull in context
• declare the connection directly and access this of the provider
• function components can access via useContext()

Resources

Articles

• context api
• hooks and context example

export const SnackBarContext = createContext()

export function SnackBarProvider({ children }) {
  const [alerts, setAlerts] = useState([])

  return (
    <SnackBarContext.Provider value=>
      {children}
      {alerts.map((alert) => <SnackBar key={alert}>{alert}</SnackBar>)}
    </SnackBarContext.Provider>
  )
}

import { useContext } from 'react'

import { SnackBarContext } from 'components/snack-bar-provider'

const useSnackBars = () => useContext(SnackBarContext)

export default useSnackBars

• react context links

This site is open source. Improve this page.