<Static>

<Static> component permanently renders its output above everything else. It's useful for displaying activity like completed tasks or logs - things that don't change after they're rendered (hence the name "Static").

It's preferred to use <Static> for use cases like these when you can't know or control the number of items that need to be rendered.

For example, Tap uses <Static> to display a list of completed tests. Gatsby uses it to display a list of generated pages while still displaying a live progress bar.

Example

import React, {useState, useEffect} from 'react';
import {render, Static, Box, Text} from 'ink';

const Example = () => {
	const [tests, setTests] = useState([]);

	useEffect(() => {
		let completedTests = 0;
		let timer;

		const run = () => {
			// Fake 10 completed tests
			if (completedTests++ < 10) {
				setTests(previousTests => [
					...previousTests,
					{
						id: previousTests.length,
						title: `Test #${previousTests.length + 1}`
					}
				]);

				timer = setTimeout(run, 100);
			}
		};

		run();

		return () => {
			clearTimeout(timer);
		};
	}, []);

	return (
		<>
			{/* This part will be rendered once to the terminal */}
			<Static items={tests}>
				{test => (
					<Box key={test.id}>
						<Text color="green">✔ {test.title}</Text>
					</Box>
				)}
			</Static>

			{/* This part keeps updating as state changes */}
			<Box marginTop={1}>
				<Text dimColor>Completed tests: {tests.length}</Text>
			</Box>
		</>
	);
};

render(<Example />);

Note: <Static> only renders new items in the items prop and ignores items that were previously rendered. This means that when you add new items to the items array, changes you make to previous items will not trigger a rerender.

See examples/static for an example usage of <Static> component.

Props

items

Type: Array

Array of items of any type to render using the function you pass as a component child.

style

Type: object

Styles to apply to a container of child elements. See <Box> for supported properties.

<Static items={...} style={{padding: 1}}>
	{...}
</Static>

children(item, index)

Type: Function

Function that is called to render every item in the items array. The first argument is the item itself, and the second argument is the index of that item in the items array.

Note that a key must be assigned to the root component.

<Static items={['a', 'b', 'c']}>
	{(item, index) => {
		// This function is called for every item in ['a', 'b', 'c']
		// `item` is 'a', 'b', 'c'
		// `index` is 0, 1, 2
		return (
			<Box key={index}>
				<Text>Item: {item}</Text>
			</Box>
		);
	}}
</Static>