glink
๐ 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/app
import glink/style
import glink/style/css_numeric
import glink/style/flex_direction
import glink/use_input
import redraw
import redraw/dom/html
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 |> app.exit(Nil)
_, use_input.Key(left_arrow: True, ..) -> set_x(int.max(1, x - 1))
_, use_input.Key(right_arrow: True, ..) -> set_x(int.min(20, x + 1))
_, use_input.Key(up_arrow: True, ..) -> set_y(int.max(1, y - 1))
_, use_input.Key(down_arrow: True, ..) -> set_y(int.min(10, y + 1))
_, _ -> Nil
}
},
[],
)
glink.box([style.flex_direction(flex_direction.Column)], [], [
glink.text([], [
html.text("Use arrow keys to move the face. Press \"q\" to exit."),
]),
glink.box(
[
style.height(css_numeric.new_(12.0)),
style.padding_left(int.to_float(x)),
style.padding_top(int.to_float(y)),
],
[],
[glink.text([], [html.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