pink

Bindings to Ink

A minimal React-like library for building terminal UIs.

Installation

This package depends on Ink and React. The specific versions listed below are recommended because they have been tested with this package. Using other versions may lead to unexpected results.

npm install ink@5.0 ink-spinner@5.0 react@18.3

To add the Pink package to your Gleam project, use the following command:

gleam add pink

Here’s a basic example of how to use Pink:

import pink
import pink/attribute
import pink/state

pub fn main() {
    // Create a new React component (we need this to use hooks)
    use <- pink.component()

    // Initialize a state (this is React's useState hook)
    let message = state.init("World")

    // Create a box with a border and a text component inside
    pink.box([attribute.border_style(attribute.BorderSingle)], [
        pink.text([], "Hello, " <> state.get(message))
    ])
}