Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
1 contributor

Users who have contributed to this file

164 lines (131 sloc) 7.42 KB
{%html:
<a href="https://github.com/revery-ui/revery/blob/master/src/index.mld" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
%}
{1 Revery}
Framework for fast, native code, cross-platform GUI applications.
{%html:
<nav class="toc">
%}
{ul
{li The Basics}
{li
{ul
{li {{:#Overview} Overview}}
{li {{:#Quickstart} Quickstart}}
{li {{:#ComponentModel} Component Model}}
{li
{ul
{li {{:#BasicComponentModel} Basic Components}}
{li {{:#HooksComponent} Components with Hooks}}
}
}
}
}
{li API}
{li
{ul
{li {{:../Revery/Revery_Core/App/index.html} App}}
{li {{:../Revery/Revery_Core/Colors/index.html} Colors}}
{li {{:../Revery/Revery_Core/Environment/index.html} Environment}}
{li {{:../Revery/Revery_Core/Key/index.html} Key}}
{li {{:../Revery/Revery_Core/Monitor/index.html} Monitor}}
{li {{:../Revery/Revery_Core/MouseButton/index.html} MouseButton}}
{li {{:../Revery/Revery_Core/MouseCursors/index.html} MouseCursors}}
{li {{:../Revery/Revery_Core/Tick/index.html} Tick}}
{li {{:../Revery/Revery_Core/Time/index.html} Time}}
{li {{:../Revery/Revery_Core/Window/index.html} Window}}
{li {{:../Revery/Revery_Core/WindowCreateOptions/index.html} WindowCreateOptions}}
}
}
{li Components}
{li
{ul
{li {{:../Revery/Revery_UI_Components/Button/index.html} Button}}
{li {{:../Revery/Revery_UI_Components/Checkbox/index.html} Checkbox}}
{li {{:../Revery/Revery_UI_Components/Clickable/index.html} Clickable}}
{li {{:../Revery/Revery_UI_Components/ClipContainer/index.html} ClipContainer}}
{li {{:../Revery/Revery_UI_Components/Container/index.html} Container}}
{li {{:../Revery/Revery_UI_Components/Dropdown/index.html} Dropdown}}
{li {{:../Revery/Revery_UI_Components/Input/index.html} Input}}
{li {{:../Revery/Revery_UI_Components/Positioned/index.html} Positioned}}
{li {{:../Revery/Revery_UI_Components/RadioButtons/index.html} RadioButtons}}
{li {{:../Revery/Revery_UI_Components/ScrollView/index.html} ScrollView}}
{li {{:../Revery/Revery_UI_Components/Slider/index.html} Slider}}
{li {{:../Revery/Revery_UI_Components/Stack/index.html} Stack}}
{li {{:../Revery/Revery_UI_Components/Tree/index.html} Tree}}
}
}
{li Hooks}
{li
{ul
{li {{:../Revery/Revery_UI_Hooks__/Animation/index.html} animation}}
{li {{:../Revery/Revery_UI_Hooks__/Effect/index.html} effect}}
{li {{:../Revery/Revery_UI_Hooks__/Reducer/index.html} reducer}}
{li {{:../Revery/Revery_UI_Hooks__/Ref/index.html} ref}}
{li {{:../Revery/Revery_UI_Hooks__/State/index.html} state}}
{li {{:../Revery/Revery_UI_Hooks__/Tick/index.html} tick}}
}
}
{li Math}
{li
{ul
{li {{:../Revery/Revery_Math/BoundingBox2d/index.html} BoundingBox2d}}
{li {{:../Revery/Revery_Math/Rectangle/index.html} Rectangle}}
}
}
{li Platform}
{li
{ul
{li {{:../Revery/Revery/Platform/index.html} Dialog}}
}
}
}
{%html:
</nav>
%}
{2:overview 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 {{:https://v2.onivim.io} Onivim 2}, but was factored out into a general toolkit for {{:https://reasonml.github.io} ReasonML} user interfaces.
{2:quickstart Quickstart}
There are two ways to get started:
{ul
{li Try out the revery {{:https://www.outrunlabs.com/revery/playground} Playground}}
{li Clone and run {{:https://github.com/revery-ui/revery-quick-start} revery-quick-start}
[git clone https://github.com/revery-ui/revery-quick-start]
[cd revery-quick-start]
[esy install]
[esy build]
[esy run]
}
}
{2:ComponentModel Component Model}
{3:BasicFunctionalComponent Basic Components}
The basic component building block is simply a {b pure function}, that returns an {e element}.
Example:
{[
let squareBox = (~children as _, ()) => <Container width=10 height=10 color=Colors.red />;
]}
Properties can be specified as {b 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>;
]}
{3:HooksComponent Components with Hooks}
For components that manage state, or have side effects, you'll want to encapsulate those using {b 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 {i function that takes a hooks object}, and then {i 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.
You can’t perform that action at this time.