glink

Types

pub type Size {
  Size(width: Float, height: Float)
}

Constructors

  • Size(width: Float, height: Float)

    Arguments

    width

    Element width.

    height

    Element height.

Function which transforms children output. It accepts children and must return transformed children too.

pub type Transform =
  fn(String, Int) -> String

Values

pub fn box(
  styles styles: List(Style),
  attributes attrs: List(Attribute),
  children children: List(Component),
) -> Component

<Box> is an essential Ink component to build your layout. It’s like <div style="display: flex"> in the browser.

pub fn measure_element(node: a) -> Size

Measure the dimensions of a particular <Box> element.

pub fn newline(count: Int) -> Component
pub fn render(component: Component) -> Instance

Mount a component and render the output.

pub fn spacer() -> Component

A flexible space that expands along the major axis of its containing layout. It’s useful as a shortcut for filling all the available spaces between elements.

pub fn static(
  props: List(Prop),
  children: List(Component),
) -> Component

<Static> component permanently renders its output above everything else. It’s useful for displaying activity like completed tasks or logs - things that are not changing after they’re rendered (hence the name “Static”).

It’s preferred to use <Static> for use cases like these, when you can’t know or control the amount of items that need to be rendered.

For example, Tap uses <Static> to display a list of completed tests. Gatsby uses it to display a list of generated pages, while still displaying a live progress bar.

pub fn text(
  props: List(Prop),
  children: List(Component),
) -> Component

This component can display text, and change its style to make it colorful, bold, underline, italic or strikethrough.

pub fn transform(
  transform: fn(String, Int) -> String,
  children: List(Component),
) -> Component

Transform a string representation of React components before they are written to output. For example, you might want to apply a gradient to text, add a clickable link or create some text effects. These use cases can’t accept React nodes as input, they are expecting a string. That’s what component does, it gives you an output string of its child components and lets you transform it in any way.

pub fn use_app() -> App

use_app is a React hook, which exposes a method to manually exit the app (unmount).

pub fn use_focus(props: List(Input)) -> Output

Component that uses use_focus hook becomes “focusable” to Ink, so when user presses Tab, Ink will switch focus to this component. If there are multiple components that execute use_focus hook, focus will be given to them in the order that these components are rendered in. This hook returns an object with is_focused boolean property, which determines if this component is focused or not.

pub fn use_focus_manager() -> Output

This hook exposes methods to enable or disable focus management for all components or manually switch focus to next or previous components.

pub fn use_input(
  handler: fn(String, Key) -> Nil,
  options: List(Option),
) -> Nil

This hook is used for handling user input. It’s a more convenient alternative to using StdinContext and listening to data events. The callback you pass to use_input is called for each character when user enters any input. However, if user pastes text and it’s more than one character, the callback will be called only once and the whole string will be passed as input.

Example

import glink
import glink/use_input
import redraw

pub fn user_input() {
  use <- redraw.component__("UserInput")

  glink.use_input(
    fn(input, key) {
      case input, key {
        "q", _ -> todo as "Exit program"
        _, use_input.Key(left_arrow: True, ..) ->
          todo as "Left arrow key pressed"
        _, _ -> Nil
      }
    },
    [],
  )

  redraw.fragment([])
}
pub fn use_stderr() -> Stderr

use_stderr is a React hook, which exposes stderr stream.

pub fn use_stdin() -> Stdin

use_stdin is a React hook, which exposes stdin stream.

pub fn use_stdout() -> Stdout

use_stdout is a React hook, which exposes stdout stream.

Search Document