`@opentui/react`

Every export of @opentui/react in the 0.6.0 release, from its type declarations. A version names the release that added an export after the module's first release.

Functions#

function createReactSlotRegistry<TSlots extends SlotMap, TContext extends PluginContext = PluginContext>(renderer: CliRenderer, context: TContext, options?: SlotRegistryOptions): SlotRegistry<ReactNode, TSlots, TContext>: React
function createRoot(renderer: CliRenderer): Root: React
function createSlot<TSlots extends SlotMap, TContext extends PluginContext = PluginContext>(registry: SlotRegistry<ReactNode, TSlots, TContext>, options?: ReactSlotOptions): ReactSlotComponent<TSlots>: React
function extend<T extends ComponentCatalogue>(objects: T): void: React
function getComponentCatalogue(): ComponentCatalogue: React
function Slot<TSlots extends SlotMap, TContext extends PluginContext = PluginContext, K extends keyof TSlots = keyof TSlots>(props: ReactSlotProps<TSlots, K, TContext>): ReactNode: React

Interfaces#

interface ReactSlotOptions

React

property ReactSlotOptions.pluginFailurePlaceholder?: (failure: PluginErrorEvent) => ReactNode

interface UseKeyboardOptions

React

property UseKeyboardOptions.release?: boolean

Types#

type AsciiFontProps = ComponentProps<ASCIIFontOptions, ASCIIFontRenderable>: Overview
type BoxProps = ComponentProps<ContainerProps<BoxOptions>, BoxRenderable> & { focused?: boolean; }: Overview
type CodeProps = ComponentProps<CodeOptions, CodeRenderable>: Overview
type DiffProps = ComponentProps<DiffRenderableOptions, DiffRenderable>: Overview
type ExtendedComponentProps<TConstructor extends RenderableConstructor, TOptions = ExtractRenderableOptions<TConstructor>> = TOptions & { children?: React.ReactNode; style?: Partial<Omit<TOptions, GetNonStyledProperties<TConstructor>>>; } & ReactProps<ExtractRenderable<TConstructor>>: React
type ExtendedIntrinsicElements<TComponentCatalogue extends Record<string, RenderableConstructor>> = { [TComponentName in keyof TComponentCatalogue]: ExtendedComponentProps<TComponentCatalogue[TComponentName]>; }: React
type GetNonStyledProperties<TConstructor> = TConstructor extends RenderableConstructor<TextRenderable> ? NonStyledProps | "content" : TConstructor extends RenderableConstructor<BoxRenderable> ? NonStyledProps | "title" | "bottomTitle" : TConstructor extends RenderableConstructor<ASCIIFontRenderable> ? NonStyledProps | "text" | "selectable" : TConstructor extends RenderableConstructor<InputRenderable> ? NonStyledProps | "placeholder" | "value" : TConstructor extends RenderableConstructor<TextareaRenderable> ? NonStyledProps | "placeholder" | "initialValue" : TConstructor extends RenderableConstructor<CodeRenderable> ? NonStyledProps | "content" | "filetype" | "syntaxStyle" | "treeSitterClient" | "conceal" | "drawUnstyledText" : TConstructor extends RenderableConstructor<MarkdownRenderable> ? NonStyledProps | "content" | "syntaxStyle" | "treeSitterClient" | "conceal" | "renderNode" : TConstructor extends RenderableConstructor<ImageRenderable> ? NonStyledProps | "source" : NonStyledProps: Overview
type ImageProps = ComponentProps<ImageRenderableOptions, ImageRenderable>: Added in 0.5.0Overview
type InputProps = ComponentProps<InputRenderableOptions, InputRenderable> & { focused?: boolean; onInput?: (value: string) => void; onChange?: (value: string) => void; onSubmit?: (value: string) => void; }: Overview
type LineBreakProps = Pick<SpanProps, "id">: Overview
type LineNumberProps = ComponentProps<ContainerProps<LineNumberOptions>, LineNumberRenderable> & { focused?: boolean; }: Overview
type LinkProps = SpanProps & { href: string; }: Overview
type MarkdownProps = ComponentProps<MarkdownOptions, MarkdownRenderable>: Overview
type NonStyledProps = "id" | "buffered" | "live" | "enableLayout" | "selectable" | "renderAfter" | "renderBefore" | `on${string}`: Overview
type ReactBoundSlotProps<TSlots extends SlotMap, K extends keyof TSlots> = { name: K; mode?: SlotMode; children?: ReactNode; } & TSlots[K]: React
type ReactPlugin<TSlots extends SlotMap, TContext extends PluginContext = PluginContext> = Plugin<ReactNode, TSlots, TContext>: React
type ReactProps<TRenderable = unknown> = { key?: React.Key; ref?: React.Ref<TRenderable>; }: Overview
type ReactRegistrySlotComponent<TSlots extends SlotMap, TContext extends PluginContext = PluginContext> = <K extends keyof TSlots>(props: ReactSlotProps<TSlots, K, TContext>) => ReactNode: React
type ReactSlotComponent<TSlots extends SlotMap> = <K extends keyof TSlots>(props: ReactBoundSlotProps<TSlots, K>) => ReactNode: React
type ReactSlotProps<TSlots extends SlotMap, K extends keyof TSlots, TContext extends PluginContext = PluginContext> = { registry: SlotRegistry<ReactNode, TSlots, TContext>; name: K; mode?: SlotMode; children?: ReactNode; pluginFailurePlaceholder?: (failure: PluginErrorEvent) => ReactNode; } & TSlots[K]: React
type RenderableConstructor<TRenderable extends BaseRenderable = BaseRenderable> = new (ctx: RenderContext, options: any) => TRenderable: React
type Root = { render: (node: ReactNode) => void; unmount: () => void; }: React
type ScrollBoxProps = ComponentProps<ContainerProps<ScrollBoxOptions>, ScrollBoxRenderable> & { focused?: boolean; }: Overview
type SelectProps = ComponentProps<SelectRenderableOptions, SelectRenderable> & { focused?: boolean; onChange?: (index: number, option: SelectOption | null) => void; onSelect?: (index: number, option: SelectOption | null) => void; }: Overview
type SpanProps = ComponentProps<TextNodeOptions, TextNodeRenderable> & { children?: TextChildren; }: Overview
type TabSelectProps = ComponentProps<TabSelectRenderableOptions, TabSelectRenderable> & { focused?: boolean; onChange?: (index: number, option: TabSelectOption | null) => void; onSelect?: (index: number, option: TabSelectOption | null) => void; }: Overview
type TextareaProps = ComponentProps<TextareaOptions, TextareaRenderable> & { focused?: boolean; onSubmit?: () => void; onContentChange?: (event: ContentChangeEvent) => void; onCursorChange?: (event: CursorChangeEvent) => void; onKeyDown?: (event: KeyEvent) => void; }: Overview
type TextProps = ComponentProps<TextOptions, TextRenderable> & { children?: TextChildren; }: Overview
type TimeToFirstDrawProps = ExtendedComponentProps<typeof TimeToFirstDrawRenderable>: TimeToFirstDraw

Constants and variables#

const AppContext: Context<AppContext>: React
const baseComponents: { box: typeof BoxRenderable; text: typeof TextRenderable; code: typeof CodeRenderable; diff: typeof DiffRenderable; markdown: typeof MarkdownRenderable; input: typeof InputRenderable; select: typeof SelectRenderable; textarea: typeof TextareaRenderable; scrollbox: typeof ScrollBoxRenderable; "ascii-font": typeof ASCIIFontRenderable; "tab-select": typeof TabSelectRenderable; "line-number": typeof LineNumberRenderable; image: typeof ImageRenderable; span: typeof SpanRenderable; br: typeof LineBreakRenderable; b: typeof BoldSpanRenderable; strong: typeof BoldSpanRenderable; i: typeof ItalicSpanRenderable; em: typeof ItalicSpanRenderable; u: typeof UnderlineSpanRenderable; a: typeof LinkRenderable; }: React
const componentCatalogue: ComponentCatalogue: React
const createPortal: (children: ReactNode, containerInfo: any, implementation: any, key?: string | null) => ReactPortal: React
const flushSync: { (): void; <R>(fn: () => R): R; } & { (): void; <R>(fn: () => R): R; }: React
const TimeToFirstDraw: (props: TimeToFirstDrawProps) => ReactElement<TimeToFirstDrawOptions & { children?: React.ReactNode; style?: Partial<Omit<TimeToFirstDrawOptions | undefined, NonStyledProps>> | undefined; } & ReactProps<TimeToFirstDrawRenderable>, string | JSXElementConstructor<any>>: TimeToFirstDraw
const useAppContext: () => AppContext: React
const useBlur: (handler: () => void) => void: React
const useFocus: (handler: () => void) => void: React
const useKeyboard: (handler: (key: KeyEvent) => void, options?: UseKeyboardOptions) => void: React
const useOnResize: (callback: (width: number, height: number) => void) => CliRenderer: React
const usePaste: (handler: (event: PasteEvent) => void) => void: React
const useRenderer: () => CliRenderer: React
const useSelectionHandler: (handler: (selection: Selection) => void) => void: React
const useTerminalDimensions: () => { width: number; height: number; }: React
const useTimeline: (options?: TimelineOptions) => Timeline: React

Namespaces and re-exports#

reexport createElement from "react"

React

index OpenTUIComponents[componentName: string]: RenderableConstructorinterface OpenTUIComponents

React

property OpenTUIComponents."time-to-first-draw": typeof TimeToFirstDrawRenderable

reexport SlotMode from "@opentui/core"

React