pink - v1.0.0

pink

Types

ReactNode

</>

A ReactNode is a representation of a component in the Ink library.

pub type ReactNode

Functions

box

</> 
pub fn box(
  styles attributes: List(Attribute),
  components children: List(ReactNode),
) -> ReactNode

box is an essential Ink component to build your layout.

It’s like a <div style="display: flex"> in the browser.

Examples

box(
  styles: [
    attribute.flex_direction(attribute.FlexColumn),
    attribute.gap(1),
  ],
  components: [
    text([], "Hello, "),
    text([attribute.underline(True)], "world!"),
  ]
)

component

</> 
pub fn component(element: fn() -> ReactNode) -> ReactNode

Make a ReactNode from a function This is needed to use React hooks in the function

Examples

use <- component()
let is_loading = hook.state(False)

fragment

</> 
pub fn fragment(
  attr attributes: List(Attribute),
  elements children: List(ReactNode),
) -> ReactNode

A React fragment is a way to group multiple elements together without adding extra nodes to the DOM.

Examples

fragment(attr: [], elements: [
  box([attribute.padding(1)], [pink.text([], "Hello, ")]),
  text([attribute.underline(True)], "world!"),
])

newline

</> 
pub fn newline(settings attributes: List(Attribute)) -> ReactNode

Adds one or more newline (\n) characters. Must be used within components.

Examples

text_nested([], [
  text([], "Hello, "),
  newline([attribute.count(2)]),
  text([], "world!")
])

render

</> 
pub fn render(component: ReactNode) -> Nil

Render a ReactNode to the terminal This is the main function to use to render components

Examples

render(
  box(
    [
      attribute.flex_direction(attribute.FlexColumn),
      attribute.gap(1),
    ],
    [
      text([], "Hello, "),
      text([attribute.underline(True)], "world!"),
    ]
  )
)

spacer

</> 
pub fn spacer() -> ReactNode

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. For example, using in a with default flex direction (row) will position “Left” on the left side and will push “Right” to the right side.

Examples

box([], [
  text([], "Left"),
  spacer(),
  text([], "Right"),
])
box(
  [
    attribute.flex_direction(attribute.FlexColumn),
    attribute.height(attribute.Spaces(10)),
  ],
  [text([], "Top"), spacer(), text([], "Bottom")],
)

spinner

</> 
pub fn spinner(type_ type_: String) -> ReactNode

Spinner component for Ink. Uses cli-spinners for the collection of spinners.

Examples

spinner(type_: "dots")

static

</> 
pub fn static(
  for items: List(a),
  using callback: fn(a, Int) -> ReactNode,
) -> ReactNode

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 for use cases like these, when you can’t know or control the amount of items that need to be rendered.

Examples

fragment([], [
  // This part will be rendered once to the terminal
  static(for: tests, using: fn(test_, _index) {
    box([attribute.key(test_)], [
      text([attribute.color("green")], "  " <> test_),
    ])
  }),
  // This part keeps updating as state changes
  box([attribute.margin_top(1)], [
    text([],
      "Completed tests: " <> int.to_string(list.length(tests)),
    ),
  ]),
])

text

</> 
pub fn text(
  with attributes: List(Attribute),
  displaying content: String,
) -> ReactNode

This component can display text, and change its style to make it bold, underline, italic or strikethrough. It only supports text content. If you need to display other components within text, use text_nested instead.

Examples

text(with: [], displaying: "Hello, world!")

text_nested

</> 
pub fn text_nested(
  attr attributes: List(Attribute),
  content children: List(ReactNode),
) -> ReactNode

The same as text, but allows you to nest other components within text.

Examples

text_nested(attr: [], content: [
 text([attribute.bold(True)], "Hello, "),
 text([attribute.underline(True)], "world!"),
])

transform

</> 
pub fn transform(
  apply transform: fn(String, Int) -> String,
  on children: List(ReactNode),
) -> ReactNode

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

Examples

transform(
  apply: fn(output, _index) { string.uppercase(output) },
  on: [text([], "Hello, world")],
)
✨ Search Document