Keyed Context

Corvu provides functions to create and access contexts with a key. Have a look at the Keyed Context section in the state guide for an example use case.

Usage

import { createKeyedContext, useKeyedContext } from 'corvu'

type ContextType = {
  open: Accessor<boolean>
}

const Dialog: Component<{
  contextId: string
}> = (props) => {
  const [open, setOpen] = createSignal(false)

  const DialogContext = createKeyedContext<ContextType>(props.contextId)

  return (
    <DialogContext.Provider value={{ open }}>
      {props.children}
    </DialogContext.Provider>
  )
}

const DialogContent: Component<{
  contextId: string
}> = (props) => {
  const { open } = useKeyedContext<ContextType>(props.contextId)

  return (
    <Show when={props.open}>
      <div>Dialog</div>
    </Show>
  )
}

API reference

createKeyedContext

Function

Creates a keyed context that can be obtained and used with getKeyedContext and useKeyedContext.

Props

key

string

defaultValue

T

Returns

Context<undefined | T>

getKeyedContext

Function

Gets a keyed context created with createKeyedContext.

Props

key

string

Returns

undefined | Context<undefined | T>

useKeyedContext

Function

Use a keyed context created with createKeyedContext to receive a scoped state from a parent's Context.Provider.

Props

key

string

Returns

undefined | T

corvu@0.2.1

Developed and designed by Jasmin