Solid.js Hooks

Hooks and interaction

Use Solid hooks to interact with the renderer and terminal state. useKeyboard registers a callback for key events, useRenderer returns the active renderer instance and useTerminalDimensions provides reactive width and height values.

useKeyboard((event) => {
  if (event.name === "escape") process.exit(0)
})

Combine hooks to build dynamic behaviour. For example, update a counter when the terminal is resized.

import { useTerminalDimensions } from "@cascadetui/solid"

function SizeIndicator() {
  const dims = useTerminalDimensions()
  return <text content={'Size: ' + dims().width + 'x' + dims().height} />
}