UNPKG

5.4 kBMarkdownView Raw
1# boxen
2
3> Create boxes in the terminal
4
5![](screenshot.png)
6
7## Install
8
9```sh
10npm install boxen
11```
12
13## Usage
14
15```js
16import boxen from 'boxen';
17
18console.log(boxen('unicorn', {padding: 1}));
19/*
20┌─────────────┐
21│ │
22│ unicorn │
23│ │
24└─────────────┘
25*/
26
27console.log(boxen('unicorn', {padding: 1, margin: 1, borderStyle: 'double'}));
28/*
29
30 ╔═════════════╗
31 ║ ║
32 ║ unicorn ║
33 ║ ║
34 ╚═════════════╝
35
36*/
37
38console.log(boxen('unicorns love rainbows', {title: 'magical', titleAlignment: 'center'}));
39/*
40┌────── magical ───────┐
41│unicorns love rainbows│
42└──────────────────────┘
43*/
44```
45
46## API
47
48### boxen(text, options?)
49
50#### text
51
52Type: `string`
53
54Text inside the box.
55
56#### options
57
58Type: `object`
59
60##### borderColor
61
62Type: `string`\
63Values: `'black'` `'red'` `'green'` `'yellow'` `'blue'` `'magenta'` `'cyan'` `'white'` `'gray'` or a hex value like `'#ff0000'`
64
65Color of the box border.
66
67##### borderStyle
68
69Type: `string | object`\
70Default: `'single'`\
71Values:
72- `'single'`
73```
74┌───┐
75│foo│
76└───┘
77```
78- `'double'`
79```
80╔═══╗
81║foo║
82╚═══╝
83```
84- `'round'` (`'single'` sides with round corners)
85```
86╭───╮
87│foo│
88╰───╯
89```
90- `'bold'`
91```
92┏━━━┓
93┃foo┃
94┗━━━┛
95```
96- `'singleDouble'` (`'single'` on top and bottom, `'double'` on right and left)
97```
98╓───╖
99║foo║
100╙───╜
101```
102- `'doubleSingle'` (`'double'` on top and bottom, `'single'` on right and left)
103```
104╒═══╕
105│foo│
106╘═══╛
107```
108- `'classic'`
109```
110+---+
111|foo|
112+---+
113```
114- `'arrow'`
115```
116↘↓↓↓↙
117→foo←
118↗↑↑↑↖
119```
120- `'none'`
121```
122foo
123```
124
125Style of the box border.
126
127Can be any of the above predefined styles or an object with the following keys:
128
129```js
130{
131 topLeft: '+',
132 topRight: '+',
133 bottomLeft: '+',
134 bottomRight: '+',
135 top: '-',
136 bottom: '-',
137 left: '|',
138 right: '|'
139}
140```
141
142##### dimBorder
143
144Type: `boolean`\
145Default: `false`
146
147Reduce opacity of the border.
148
149##### title
150
151Type: `string`
152
153Display a title at the top of the box.
154If needed, the box will horizontally expand to fit the title.
155
156Example:
157```js
158console.log(boxen('foo bar', {title: 'example'}));
159/*
160┌ example ┐
161│foo bar │
162└─────────┘
163*/
164```
165
166##### titleAlignment
167
168Type: `string`\
169Default: `'left'`
170
171Align the title in the top bar.
172
173Values:
174- `'left'`
175```js
176/*
177┌ example ──────┐
178│foo bar foo bar│
179└───────────────┘
180*/
181```
182- `'center'`
183```js
184/*
185┌─── example ───┐
186│foo bar foo bar│
187└───────────────┘
188*/
189```
190- `'right'`
191```js
192/*
193┌────── example ┐
194│foo bar foo bar│
195└───────────────┘
196*/
197```
198
199##### width
200
201Type: `number`
202
203Set a fixed width for the box.
204
205*Note:* This disables terminal overflow handling and may cause the box to look broken if the user's terminal is not wide enough.
206
207```js
208import boxen from 'boxen';
209
210console.log(boxen('foo bar', {width: 15}));
211// ┌─────────────┐
212// │foo bar │
213// └─────────────┘
214```
215
216##### height
217
218Type: `number`
219
220Set a fixed height for the box.
221
222*Note:* This option will crop overflowing content.
223
224```js
225import boxen from 'boxen';
226
227console.log(boxen('foo bar', {height: 5}));
228// ┌───────┐
229// │foo bar│
230// │ │
231// │ │
232// └───────┘
233```
234
235##### fullscreen
236
237Type: `boolean | (width: number, height: number) => [width: number, height: number]`
238
239Whether or not to fit all available space within the terminal.
240
241Pass a callback function to control box dimensions:
242
243```js
244import boxen from 'boxen';
245
246console.log(boxen('foo bar', {
247 fullscreen: (width, height) => [width, height - 1],
248}));
249```
250
251##### padding
252
253Type: `number | object`\
254Default: `0`
255
256Space between the text and box border.
257
258Accepts a number or an object with any of the `top`, `right`, `bottom`, `left` properties. When a number is specified, the left/right padding is 3 times the top/bottom to make it look nice.
259
260##### margin
261
262Type: `number | object`\
263Default: `0`
264
265Space around the box.
266
267Accepts a number or an object with any of the `top`, `right`, `bottom`, `left` properties. When a number is specified, the left/right margin is 3 times the top/bottom to make it look nice.
268
269##### float
270
271Type: `string`\
272Default: `'left'`\
273Values: `'right'` `'center'` `'left'`
274
275Float the box on the available terminal screen space.
276
277##### backgroundColor
278
279Type: `string`\
280Values: `'black'` `'red'` `'green'` `'yellow'` `'blue'` `'magenta'` `'cyan'` `'white'` `'gray'` or a hex value like `'#ff0000'`
281
282Color of the background.
283
284##### textAlignment
285
286Type: `string`\
287Default: `'left'`\
288Values: `'left'` `'center'` `'right'`
289
290Align the text in the box based on the widest line.
291
292## Maintainer
293
294- [Sindre Sorhus](https://github.com/sindresorhus)
295- [Caesarovich](https://github.com/Caesarovich)
296
297## Related
298
299- [boxen-cli](https://github.com/sindresorhus/boxen-cli) - CLI for this module
300- [cli-boxes](https://github.com/sindresorhus/cli-boxes) - Boxes for use in the terminal