@ratatat/react

React renderer for Ratatat with an Ink-compatible API.

Built on top of @ratatat/core, this package provides components, hooks, layout, and render lifecycle APIs for terminal UIs.

Install

npm install @ratatat/react react

Quick start

import React from 'react'
import { render, Box, Text, useInput } from '@ratatat/react'

function App() {
  useInput((input, key) => {
    if (key.ctrl && input === 'c') process.exit(0)
  })

  return (
    <Box padding={1}>
      <Text color="cyan">Hello from @ratatat/react</Text>
    </Box>
  )
}

render(<App />)

Main exports

• Rendering: render, renderInline, renderToString
• Components: Box, Text, Static, Transform, Spinner, ProgressBar, Newline, Spacer
• Hooks: useInput, useApp, usePaste, useMouse, useFocus, useFocusManager, useScrollable, useTextInput, useWindowSize, useStdout, useStderr

Docs

• Quickstart: React mode
• Components reference
• Hooks reference
• Ink compatibility matrix
• Examples catalog

For low-level non-React rendering, use @ratatat/core.