redraw - v1.0.0

redraw

Types

Component

</>

Default Node in redraw. Use component-family functions to create components. Forwarded ref can be constructed using forward_ref-family functions, while external components can be used with to_component-family functions.

pub type Component

Context

</>

Pass data without props drilling. Documentation

pub type Context(a)

Ref

</>

A Ref is a mutable data stored in React, persisted across renders. They allow to keep track of a DOM node, a component data, or to store a mutable variable in the component, outside of every component lifecycle.

pub type Ref(a)

Suspense

</> 
pub type Suspense {
  Suspense(fallback: Component)
}

Constructors 

  • Suspense(fallback: Component)

Functions

act

</> 
pub fn act(act_fn: fn() -> Promise(Nil)) -> Promise(Nil)

Test helper to apply pending React updates before making assertions. Documentation

component

</> 
pub fn component(
  name name: String,
  render render: fn(a, List(Component)) -> Component,
) -> fn(a, List(Component)) -> Component

Create a Redraw component, with a name, and a render function. render will accept props, and a list of children.

component_

</> 
pub fn component_(
  name name: String,
  render render: fn(a) -> Component,
) -> fn(a) -> Component

Create a Redraw component, with a name, and a render function. This component does not accept children.

component__

</> 
pub fn component__(
  name name: String,
  render render: fn() -> Component,
) -> fn() -> Component

Create a Redraw component, with a name and a render function. This component does not accept children nor props.

create_context

</> 
pub fn create_context(
  default_value default_value: Option(a),
) -> Context(a)

Let you create a context that components can provide or read. Documentation

forward_ref

</> 
pub fn forward_ref(
  name name: String,
  render render: fn(a, Ref(b), List(Component)) -> Component,
) -> fn(a, Ref(b), List(Component)) -> Component

Create a Redraw component with children with forwarded ref. Take a look at redraw.dev documentation to get more info.

forward_ref_

</> 
pub fn forward_ref_(
  name name: String,
  render render: fn(a, Ref(b)) -> Component,
) -> fn(a, Ref(b)) -> Component

Create a Redraw component without children with forwarded ref. Take a look at redraw.dev documentation to get more info.

fragment

</> 
pub fn fragment(children: List(Component)) -> Component

Fragment allow to group children, without creating a node in the DOM. Documentation

get_current

</> 
pub fn get_current(from ref: Ref(a)) -> a

Get the current value of a ref.

keyed

</> 
pub fn keyed(
  element: fn(List(Component)) -> Component,
  content: List(#(String, Component)),
) -> Component

Redraw does not support passing key element to components in an easy way like React does. To simplify this, it uses the same API than Lustre to put keys on children.

fn my_component(props, children) {
  redraw.keyed(my_other_component(props, _), {
    use item <- list.map(children)
    #("my-key", item)
  })
}

memo

</> 
pub fn memo(
  component: fn(a, List(Component)) -> Component,
) -> fn(a, List(Component)) -> Component

Memoizes a Redraw component with children.

memo_

</> 
pub fn memo_(component: fn(a) -> Component) -> fn(a) -> Component

Memoizes a Redraw component without children.

profiler

</> 
pub fn profiler(children: List(Component)) -> Component

Profile allows to measure code performance for a component tree. Documentation

provider

</> 
pub fn provider(
  context context: Context(a),
  value value: a,
  children children: List(Component),
) -> Component

Wrap your components into a context provider to specify the value of this context for all components inside. Documentation

set_current

</> 
pub fn set_current(of ref: Ref(a), with value: a) -> Nil

Set the current value of a ref, overriding its existing content.

start_transition

</> 
pub fn start_transition(scope scope: fn() -> Nil) -> Nil

Let you update the state without blocking the UI. Documentation

strict_mode

</> 
pub fn strict_mode(children: List(Component)) -> Component

Strict Mode should be enabled during development. Documentation

suspense

</> 
pub fn suspense(
  props: Suspense,
  children: List(Component),
) -> Component

Suspense allow to display a fallback content while waiting for children to finish loading. Documentation

to_component

</> 
pub fn to_component(
  name name: String,
  component render: fn(a) -> Component,
) -> fn(b, List(Component)) -> Component

Convert a React component to a React-redraw component with children. Give it a name, and send directly the FFI. Don’t worry about the snake_case over camelCase, redraw take care of it for you.

import redraw

@external(javascript, "my_library", "MyComponent")
fn do_my_component(props: props) -> redraw.Component

pub type MyComponentProps {
  MyComponentProps(
    first_prop: Bool,
    second_prop: String,
  )
}

pub fn my_component() -> fn(MyComponentProps) -> redraw.Component {
  redraw.to_component("MyComponent", do_my_component)
}

to_component_

</> 
pub fn to_component_(
  name name: String,
  component render: fn(a) -> Component,
) -> fn(b) -> Component

Convert a React Component to a redraw Component without children. Give it a name, and send directly the FFI. Don’t worry about the snake_case over camelCase, redraw take care of it for you.

import redraw

@external(javascript, "my_library", "MyComponent")
fn do_my_component(props: props) -> redraw.Component

pub type MyComponentProps {
  MyComponentProps(
    first_prop: Bool,
    second_prop: String,
  )
}

pub fn my_component() -> fn(MyComponentProps) -> redraw.Component {
  redraw.to_component_("MyComponent", do_my_component)
}

use_callback

</> 
pub fn use_callback(fun: a, dependencies: b) -> c

Let you cache a function definition between re-renders. dependencies should be a tuple. Documentation

use_context

</> 
pub fn use_context(context: Context(a)) -> a

Let you read and subscribe to context from your component. Documentation

use_debug_value

</> 
pub fn use_debug_value(value: a) -> Nil

Let you add a label to a custom Hook in React DevTools. Documentation

use_debug_value_

</> 
pub fn use_debug_value_(
  value: a,
  formatter: fn(a) -> String,
) -> Nil

Let you add a label to a custom Hook in React DevTools, but allow to format it before. Documentation

use_deferred_value

</> 
pub fn use_deferred_value(value: a) -> a

Let you defer updating a part of the UI. Documentation

use_effect

</> 
pub fn use_effect(value: fn() -> Nil, dependencies: a) -> Nil

Let you synchronize a component with an external system. Documentation

use_id

</> 
pub fn use_id() -> String

Generate unique IDs that can be passed to accessibility attributes. Documentation

use_imperative_handle

</> 
pub fn use_imperative_handle(
  ref: Ref(Option(a)),
  handler: fn() -> a,
  dependencies: b,
) -> Nil

Let you customize the handle exposed as a ref. Use use_imperative_handle when you want to customize the data stored in a ref. It’s mostly used in conjuction with forward_ref. Documentation

use_imperative_handle_

</> 
pub fn use_imperative_handle_(
  ref: Ref(a),
  handler: fn() -> a,
  dependencies: b,
) -> Nil

Let you customize the handle exposed as a ref. Use use_imperative_handle by default, unless you really know what you’re doing. Documentation

use_layout_effect

</> 
pub fn use_layout_effect(
  value: fn() -> Nil,
  dependencies: a,
) -> Nil

Version of useEffect that fires before the browser repaints the screen. Documentation

use_lazy_state

</> 
pub fn use_lazy_state(
  initial_value: fn() -> a,
) -> #(a, fn(a) -> Nil)

Let you add a state variable to your component. Allow to create the initial value in a lazy way. Documentation

use_lazy_state_

</> 
pub fn use_lazy_state_(
  initial_value: fn() -> a,
) -> #(a, fn(fn(a) -> a) -> Nil)

Let you add a state variable to your component. Allow to create the initial value in a lazy way. Give an updater function instead of a state setter. Documentation

use_memo

</> 
pub fn use_memo(calculate_value: fn() -> a, dependencies: b) -> a

Let you cache the result of a calculation between re-renders. Documentation

use_reducer

</> 
pub fn use_reducer(
  reducer: fn(a, b) -> a,
  initial_state: a,
) -> #(a, fn(b) -> Nil)

Let you add a reducer to your component. Documentation

use_reducer_

</> 
pub fn use_reducer_(
  reducer: fn(a, b) -> a,
  initializer: c,
  init: fn(c) -> a,
) -> #(a, fn(b) -> Nil)

Let you add a reducer to your component. Allow to initialize the store in a custom way. Documentation

use_ref

</> 
pub fn use_ref() -> Ref(Option(a))

Let you reference a value that’s not needed for rendering. Most used ref you’ll want to create. They’re automatically created to None, and can be passed to attribute.ref or use_imperative_handle. You probably don’t want the ref value to be anything than Option(a), unless you have really strong reasons. Documentation

use_ref_

</> 
pub fn use_ref_(initial_value: a) -> Ref(a)

Let you reference a value that’s not needed for rendering. Use use_ref if you’re trying to acquire a reference to a child or to a component. Use use_ref_ when you want to keep track of a data, like if you’re doing some side-effects, in conjuction with get_current and set_current. Documentation

use_state

</> 
pub fn use_state(initial_value: a) -> #(a, fn(a) -> Nil)

Let you add a state variable to your component. Documentation

use_state_

</> 
pub fn use_state_(
  initial_value: a,
) -> #(a, fn(fn(a) -> a) -> Nil)

Let you add a state variable to your component. Give an updater function instead of a state setter. Documentation

use_transition

</> 
pub fn use_transition() -> #(Bool, fn() -> Nil)

Let you update the state without blocking the UI. Documentation

✨ Search Document