glink

glink

Package Version Hex Docs

🌈 Ink bindings for Gleam! ✨

Installation

Use glink with the awesome redraw package for your React bindings.

gleam add glink redraw redraw_dom

With your favorite package manager or runtime, install the following JavaScript peer dependencies.

npm install ink react@^18 react-dom@^18

Usage

Documentation can be found at https://hexdocs.pm/glink.

Example

import gleam/int
import glink
import glink/style
import glink/style/flex_direction
import redraw

fn robot() {
  use <- redraw.component__("Robot")
  let app = glink.use_app()
  let #(x, set_x) = redraw.use_state(1)
  let #(y, set_y) = redraw.use_state(1)

  glink.use_input_(fn(input, key) {
    case input, key {
      "q", _ -> app.exit(Nil)
      _, k if k.left_arrow -> set_x(int.max(1, x - 1))
      _, k if k.right_arrow -> set_x(int.min(20, x + 1))
      _, k if k.up_arrow -> set_y(int.max(1, y - 1))
      _, k if k.down_arrow -> set_y(int.min(10, y + 1))
      _, _ -> Nil
    }
  })

  glink.box_([style.flex_direction(flex_direction.Column)], [
    glink.text__("Use arrow keys to move the face. Press \"q\" to exit."),
    glink.box_(
      [
        style.height("12"),
        style.padding_left(int.to_float(x)),
        style.padding_top(int.to_float(y)),
      ],
      [glink.text__("^_^")],
    ),
  ])
}

pub fn main() {
  let robot = robot()
  glink.render(robot())
}

Translated from https://github.com/vadimdemedes/ink/blob/master/examples/use-input/use-input.tsx.

Contributing

Prerequisites

You can install the following tools using mise.

Initial Setup

just

Development

just fmt clean build
✨ Search Document