This library provides ReScript bindings for HeadlessUI React components.

Installation

npm install rescript-headlessui

Add it to bs-dependencies in your rescript.json:

{
  "bs-dependencies": ["rescript-headlessui"]
}

Usage

Props

To use ReactDOM.domProps in all components, it was necessary to remove collisions. This was achieved by maintaining a custom list of props that excludes most of the fields defined by HeadlessUI.

The only exception is for components with event handlers or names resembling event handlers (e.g., onChange). Instead of removing these properties globally, they were overridden in the specific modules where they are used. For example, <Combobox.Input onChange={...} /> should be written as <Combobox.Input onChangeHeadless={...} />, with the function defined as @as("onChange") onChangeHeadless?: ReactEvent.Form.t => unit.

If you need one of the properties listed below, please wrap the component in a native element.

{disabled, value, defaultValue, by, multiple, name, form, children, as_, type, checked, defaultChecked, order, role, autoFocus, open_}

Union type bindings

Many of the HeadlessUI bindings allow union types, which can be challenging to represent in ReScript. When the allowed values were well-defined, they were converted into variants: