React Bindings

The React package provides React components and hooks for BetterTUI.

Components

Box

<Box
  flexDirection="row"
  justifyContent="center"
  alignItems="center"
  padding={1}
  gap={1}
  borderStyle="round"
  width={40}
  height={10}
>
  {children}
</Box>

Text

<Text bold color="cyan" dimColor italic underline>
  Hello, World!
</Text>

Button

<Button onPress={handlePress} isDisabled={false}>
  Click me
</Button>

Input

<Input
  value={value}
  onChange={setValue}
  onSubmit={handleSubmit}
  placeholder="Type here"
  mask="*"
/>

Hooks

useInput

useInput((key, event) => {
  // Handle key press
}, isActive);

useFocus

const [isFocused, focusProps] = useFocus();

useApp

const { exit, isRawModeSupported, rawMode } = useApp();

useStdoutDimensions

const [columns, rows] = useStdoutDimensions();

useTheme

const { theme, setTheme, toggleTheme } = useTheme();

useAnimation

const { value, start, stop } = useAnimation({
  from: 0,
  to: 100,
  duration: 1000,
  easing: 'easeInOut',
});

useEvent

useEvent('custom:event', (data) => {
  // Handle event
});

render

import { render } from '@bettertui/react';

render(<App />, {
  exitOnCtrlC: true,
  stdin: process.stdin,
  stdout: process.stdout,
});