All projects
Ink Components
ink-multiline-input
Multi-line text input for Ink, with cursor navigation, editing and scrolling.
$
npm install ink-multiline-inputTypeScript
Vertical scrolling
Keeps the cursor in view as you type.
Cursor navigation
Arrow keys, Backspace and Delete.
Line highlight
Style the active line with highlightStyle.
Masking
Hide input with a mask character.
input.tsx
import { useState } from "react";
import { render, Box } from "ink";
import { MultilineInput } from "ink-multiline-input";
const App = () => {
const [value, setValue] = useState("");
return (
<Box padding={1}>
<MultilineInput
value={value}
onChange={setValue}
rows={3}
maxRows={10}
placeholder="Type something here..."
highlightStyle={{ backgroundColor: "blue" }}
onSubmit={(val) => console.log("Submitted:", val)}
keyBindings={{ submit: (key) => key.ctrl && key.return }}
/>
</Box>
);
};
render(<App />);