Component APIs

useContext

import { useContext } from "solid-js"
import type { Context } from "solid-js"

function useContext<T>(context: Context<T>): T

Used to grab context within a context provider scope to allow for deep passing of props without having to pass them through each Component function.

const [state, { increment, decrement }] = useContext(CounterContext)

Recommended usage

It is often a good idea to wrap useContext in a function like so:

function useCounterContext() {
  const context = useContext(CounterContext)
  if (!context) {
    throw new Error("useCounterContext: cannot find a CounterContext")
  }
  return context
}

See the API reference of createContext for the explanation of what this solves.

Report an issue with this page