mariscript

olá, amigos.

sempre quis testar o react ink pra ver como ficam os componentes estilizados no terminal, aí aproveitei pra registrar o processo aqui e nunca mais esquecer (rs). o react ink é basicamente uma biblioteca para criar interfaces interativas no terminal usando React. quem já tem alguma familiaridade com React vai achar super tranquilo de mexer (quem não tem também!).

criando o projeto

pra criar o projetin usei o comando da documentação (dá pra usar com Typescript também, esse aí só cria os arquivos .js mesmo):

npx create-ink-app my-ink-cli

estrutura de pastas

por padrão, esse comando vai criar o projetinho com duas pastas base: a pasta source/ com o código-fonte (onde a gente efetivamente vai codar) e a pasta dist/.

o código da pasta source/ ainda não está pronto para rodar diretamente no Node.js (porque pode conter sintaxe que o Node não entende). o código da pasta dist/ tem o código transpilado e convertido por ferramentas como Babel ou TypeScript. é onde vai parar o JavaScript compatível com o Node.js.

rodando o projeto

aí beleza, a gente precisa compilar então. como funciona?

1. 👨‍💻 codar tudo em source/
2. ⚙️ rodar npm run dev ou npm run build
3. 🛠 Babel compila tudo para dist/
4. ▶️ executar o que está na pasta dist com algo do tipo: node dist/index.js

algumas descobertas

depois de rodar fui testando os componentes, sem muita complexidade. deixo aqui algumas coisas legais que dá pra fazer no terminal:

componente <Text>

código:

<Text color="cyan">Esse é o texto ciano</Text> <Text backgroundColor="blue" color="white">Esse é o texto com fundo azul</Text> <Text color="rgb(232, 131, 136)">Esse é o texto com suporte pra RGB personalizado</Text> <Text bold="true">Esse é o texto em negrito</Text> <Text underline="true">Esse é o texto sublinhado</Text> <Text italic="true">Esse é o texto itálico</Text> <Text strikethrough="true">Esse é o texto riscado</Text>

resultado no terminal:

componente <Box> com borda

código:

<Box borderStyle="singleDouble" marginRight={2}> <Text>Box com borda simples</Text> </Box> <Box borderStyle="doubleSingle" marginRight={2}> <Text>Box com borda dupla</Text> </Box> <Box borderStyle="classic"> <Text>Box com borda clássica</Text> </Box> <Box borderStyle="round" borderColor="green"> <Text>Box com borda verde arredondada</Text> </Box>

resultado no terminal:

hook useInput

é basicamente um hook pra detectar inputs do teclado.

código:

const InputDemo = () => {     useInput((input, key) => {         if (key.leftArrow) console.log('⬅️ esquerda');         if (key.return) console.log('🔘 enter');         if (input === 'q') console.log('Saindo...');     });     return <Text>Pressione alguma tecla (veja o console)</Text>; };

resultado no terminal (depois de clicar na tecla da esquerda e no enter algumas vezes):

hooks useState + useEffect

igual no React pra web, é possível usar hooks pra capturar eventos e forçar rerenders. nesse caso fiz um teste com um componente simples de relógio pra capturar a hora do PC.

código:

const Clock = () => {     const [time, setTime] = useState(new Date());     useEffect(() => {         const timer = setInterval(() => setTime(new Date()), 1000);         return () => clearInterval(timer);     }, []);     return <Text color="cyan">🕒 {time.toLocaleTimeString()}</Text>; };

resultado no terminal:

conclusiones

ainda quero testar mais a lib e fazer um programinha funcional, mas o que vi é que o Ink é muuuito legal pra fazer automações e scripts de terminal de uma forma mais bacaninha. tem muita possibilidade!

deixo aqui o repositório testing-react-ink no Github 🙂