Controllable Signal

When you’re building an unopinionated component, you might want to give the user the option to control its state. For example, a Dialog component might have an open state which the user can take control of. The createControllableSignal utility allows you to pass an optional signal which will be used as the state instead of the internally managed signal.

Usage

import { createControllableSignal } from 'corvu'

const Dialog: Component<{
  open?: boolean
  onOpenChange?: Setter<boolean>
  initialOpen?: boolean
}> = (props) => {
  const [open, setOpen] = createControllableSignal({
    value: () => props.open,
    initialValue: () => props.initialOpen,
    onChange: props.onOpenChange,
  })

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

API reference

createControllableSignal

Function

Creates a simple reactive state with a getter and setter. Can be controlled by providing your own state through the value prop.

Props

value

Accessor<undefined | T>

Controlled value of the state.

onChange

(value: T) => void

Callback fired when the value changes.

Returns

Signal<T | undefined>

corvu@0.2.3

Developed and designed by Jasmin