Confirmation input component for Ink
$ npm install ink-confirm-input2
import React, {useCallback, useState} from 'react';
import {render, Box, Text} from 'ink';
import ConfirmInput from 'ink-confirm-input2';
const UnicornQuestion = () => {
const [answer, setAnswer] = useState();
const [value, setValue] = useState('');
const handleSubmit = useCallback(submitValue => {
if (submitValue === false) {
setAnswer({answer: 'You are heartless…'});
return;
}
setAnswer({answer: 'You love unicorns!'});
}, [setAnswer]);
return (
<Box>
<Text>Do you like unicorns? (Y/n)</Text>
<ConfirmInput
isChecked
value={value}
onChange={setValue}
onSubmit={handleSubmit}
/>
{answer && answer}
</Box>
);
};
render(<UnicornQuestion/>);
<ConfirmInput/>
accepts the same props as <TextInput/>
in addition to the ones below.
Type: boolean
Whether to return true
or false
by default.
Type: string
Value to display in a text input.
Type: string
Text to display when value
is empty.
Type: Function
Function to call when value updates. Returns a string
with the input.
Type: Function
Function to call when user press Enter. Returns a boolean
for the answer.
This component also exposes an uncontrolled version, which handles value
changes for you. To receive the final input value, use onSubmit
prop.
Initial value can be specified via initialValue
prop, which is supported only in UncontrolledTextInput
component.
import React from 'react';
import {render, Box, Text} from 'ink';
import {UncontrolledConfirmInput} from 'ink-confirm-input2';
const UnicornQuestion = () => {
const [answer, setAnswer] = useState();
const handleSubmit = submitValue => {
if (submitValue === false) {
setAnswer({answer: 'You are heartless…'});
return;
}
setAnswer({answer: 'You love unicorns!'});
};
return (
<Box>
<Text>Do you like unicorns? (Y/n)</Text>
<UncontrolledConfirmInput
isChecked
onSubmit={handleSubmit}
/>
{answer && answer}
</Box>
);
};
render(<SearchQuery />);