UNPKG

6.43 kBTypeScriptView Raw
1import * as React from "react";
2
3export interface RenderOptions {
4 /**
5 * Output stream where app will be rendered.
6 *
7 * @default process.stdout
8 */
9 readonly stdout?: NodeJS.WriteStream;
10 /**
11 * Input stream where app will listen for input.
12 *
13 * @default process.stdin
14 */
15 readonly stdin?: NodeJS.ReadStream;
16 /**
17 * Configure whether Ink should listen to Ctrl+C keyboard input and exit the app. This is needed in case `process.stdin` is in raw mode, because then Ctrl+C is ignored by default and process is expected to handle it manually.
18 *
19 * @default true
20 */
21 readonly exitOnCtrlC?: boolean;
22 /**
23 * If true, each update will be rendered as a separate output, without replacing the previous one.
24 *
25 * @default false
26 */
27 readonly debug?: boolean;
28}
29
30export type Instance = {
31 /**
32 * Replace previous root node with a new one or update props of the current root node.
33 */
34 rerender: <Props>(tree: React.ReactElement<Props>) => void;
35 /**
36 * Manually unmount the whole Ink app.
37 */
38 unmount: Unmount;
39 /**
40 * Returns a promise, which resolves when app is unmounted.
41 */
42 waitUntilExit: () => Promise<void>;
43};
44
45export type Unmount = () => void;
46
47/**
48 * Mount a component and render the output.
49 */
50export function render<Props>(
51 tree: React.ReactElement<Props>,
52 options?: NodeJS.WriteStream | RenderOptions
53): Instance;
54
55export interface ColorProps {
56 readonly hex?: string;
57 readonly hsl?: [number, number, number];
58 readonly hsv?: [number, number, number];
59 readonly hwb?: [number, number, number];
60 readonly rgb?: [number, number, number];
61 readonly keyword?: string;
62 readonly bgHex?: string;
63 readonly bgHsl?: [number, number, number];
64 readonly bgHsv?: [number, number, number];
65 readonly bgHwb?: [number, number, number];
66 readonly bgRgb?: [number, number, number];
67 readonly bgKeyword?: string;
68
69 readonly reset?: boolean;
70 readonly bold?: boolean;
71 readonly dim?: boolean;
72 readonly italic?: boolean;
73 readonly underline?: boolean;
74 readonly inverse?: boolean;
75 readonly hidden?: boolean;
76 readonly strikethrough?: boolean;
77
78 readonly visible?: boolean;
79
80 readonly black?: boolean;
81 readonly red?: boolean;
82 readonly green?: boolean;
83 readonly yellow?: boolean;
84 readonly blue?: boolean;
85 readonly magenta?: boolean;
86 readonly cyan?: boolean;
87 readonly white?: boolean;
88 readonly gray?: boolean;
89 readonly grey?: boolean;
90 readonly blackBright?: boolean;
91 readonly redBright?: boolean;
92 readonly greenBright?: boolean;
93 readonly yellowBright?: boolean;
94 readonly blueBright?: boolean;
95 readonly magentaBright?: boolean;
96 readonly cyanBright?: boolean;
97 readonly whiteBright?: boolean;
98
99 readonly bgBlack?: boolean;
100 readonly bgRed?: boolean;
101 readonly bgGreen?: boolean;
102 readonly bgYellow?: boolean;
103 readonly bgBlue?: boolean;
104 readonly bgMagenta?: boolean;
105 readonly bgCyan?: boolean;
106 readonly bgWhite?: boolean;
107 readonly bgBlackBright?: boolean;
108 readonly bgRedBright?: boolean;
109 readonly bgGreenBright?: boolean;
110 readonly bgYellowBright?: boolean;
111 readonly bgBlueBright?: boolean;
112 readonly bgMagentaBright?: boolean;
113 readonly bgCyanBright?: boolean;
114 readonly bgWhiteBright?: boolean;
115}
116
117/**
118 * The `<Color>` compoment is a simple wrapper around the `chalk` API. It supports all of the `chalk`'s methods as `props`.
119 */
120export const Color: React.FC<ColorProps>;
121
122export interface BoxProps {
123 readonly width?: number;
124 readonly height?: number;
125 readonly paddingTop?: number;
126 readonly paddingBottom?: number;
127 readonly paddingLeft?: number;
128 readonly paddingRight?: number;
129 readonly paddingX?: number;
130 readonly paddingY?: number;
131 readonly padding?: number;
132 readonly marginTop?: number;
133 readonly marginBottom?: number;
134 readonly marginLeft?: number;
135 readonly marginRight?: number;
136 readonly marginX?: number;
137 readonly marginY?: number;
138 readonly margin?: number;
139 readonly flexGrow?: number;
140 readonly flexShrink?: number;
141 readonly flexDirection?: "row" | "row-reverse" | "column" | "column-reverse";
142 readonly alignItems?: "flex-start" | "center" | "flex-end";
143 readonly justifyContent?:
144 | "flex-start"
145 | "center"
146 | "flex-end"
147 | "space-between"
148 | "space-around";
149}
150
151/**
152 * `<Box>` it's an essential Ink component to build your layout. It's like a `<div style="display: flex">` in a browser.
153 */
154export const Box: React.ComponentClass<BoxProps>;
155
156export interface TextProps {
157 readonly bold?: boolean;
158 readonly italic?: boolean;
159 readonly underline?: boolean;
160 readonly strikethrough?: boolean;
161}
162
163/**
164 * This component can change the style of the text, make it bold, underline, italic or strikethrough.
165 */
166export const Text: React.FC<TextProps>;
167
168/**
169 * `<Static>` component allows permanently rendering output to stdout and preserving it across renders. Components passed to `<Static>` as children will be written to stdout only once and will never be rerendered. `<Static>` output comes first, before any other output from your components, no matter where it is in the tree. In order for this mechanism to work properly, at most one `<Static>` component must be present in your node tree and components that were rendered must never update their output. Ink will detect new children appended to `<Static>` and render them to stdout.
170 *
171 * __Note__: `<Static>` accepts only an array of children and each of them must have a unique key.
172 */
173export const Static: React.FC<{children: React.ReactNodeArray}>;
174
175/**
176 * `<AppContext>` is a React context, which exposes a method to manually exit the app (unmount).
177 */
178export const AppContext: React.Context<{
179 /**
180 * Exit (unmount) the whole Ink app.
181 */
182 readonly exit: () => void;
183}>;
184
185/**
186 * <StdinContext> is a React context, which exposes input stream.
187 */
188export const StdinContext: React.Context<{
189 /**
190 * Stdin stream passed to `render()` in `options.stdin` or `process.stdin` by default. Useful if your app needs to handle user input.
191 */
192 readonly stdin: NodeJS.ReadStream;
193 /**
194 * Ink exposes this function via own `<StdinContext>` to be able to handle Ctrl+C, that's why you should use Ink's `setRawMode` instead of `process.stdin.setRawMode`.
195 */
196 readonly setRawMode: NodeJS.ReadStream["setRawMode"];
197}>;
198
199/**
200 * `<StdoutContext>` is a React context, which exposes stdout stream, where Ink renders your app.
201 */
202export const StdoutContext: React.Context<{
203 /**
204 * Stdout stream passed to `render()` in `options.stdout` or `process.stdout` by default.
205 */
206 readonly stdout: NodeJS.WriteStream;
207}>;