Revery API

Revery

Framework for fast, native code, cross-platform GUI applications

Overview

Revery is a framework for building cross-platform GUI applications. Revery provides a React-like, functional approach for modeling UI, as well as scaffolding for managing the application lifecycle.

Revery started as the foundation of Onivim 2, but was factored out into a general toolkit for ReasonML user interfaces.

Quickstart

There are two ways to get started:

• Try out the revery Playground
• Clone and run revery-quick-startgit clone https://github.com/revery-ui/revery-quick-start

  cd revery-quick-start

  esy install

  esy build

  esy run

Component Model

Basic Components

The basic component building block is simply a pure function, that returns an element.

Example:

let squareBox = (~children as _, ()) => <Container width=10 height=10 color=Colors.red />;

Properties can be specified as named arguments.

Example:

let wideBox = (~children as _, ~width: int, ()) => <Container width height=10 color=Colors.red />;

Note that the ~children as _ is used to ignore the children argument when it is not used (otherwise, there will be a compiler warning.)

You may instead decide you wish to render the children, for example:

let boxWithChildren = (~children, ()) => <Container width=10 height=10 color=Colors.red>children</Container>;

Components with Hooks

For components that manage state, or have side effects, you’ll want to encapsulate those using hooks!

A component that uses hooks must create a handle via React.component, for example:

let componentWithHooks = {
    let component = React.component("componentWithHooks");
    (~children, ()) => component(hooks => {
       let (state, setState, hooks) = Hooks.state(0, hooks);

       (hooks, <Button text=string_of_int(state) onClick={(_) => setState(state + 1)}/>)
    });
};

Hooks components still return a function with named arguments representing the properties, but there is a nested call to component(hooks => ... – a hooks component is a function that takes a hooks object, and then returns a tuple of (hooks, element).

In effect, Revery components should always be pure functions – given a set of props, and a hooks, the output should always be the same.