bs-reactour

ReasonML bindings for reactour library. JSX 3 syntax only.

Installation

npm i --save bs-reactour reactour

Then add bs-reactour as a dependency to bsconfig.json.

Usage

[@react.component]
let make = () => {
  let (isOpen, setIsOpen) = React.useState(() => true);
  let handleClose =
    React.useCallback1(() => setIsOpen(_ => false), [|setIsOpen|]);

  <Reactour
    isOpen
    steps={Reactour.Steps.Step.[{
      selector: "#cta",
      content: `element(<>{"Click this!" |> React.string}</>),
      position: `right,
      action: _ => {
        Js.log("The first step entered!")
      },
      style: ReactDOMRe.Style.make(),
      stepInteraction: true,
      navDotAriaLabel: "",
    }, {
      selector: "#modal",
      content: `element(<>{"You made this thing to pop up!" |> React.string}</>),
      position: `left,
      action: _ => {
        Js.log("The second step entered!")
      },
      style: ReactDOMRe.Style.make(
        ~width="300px",
        ()
      ),
      stepInteraction: false,
      navDotAriaLabel: "",
    }]}
    onRequestClose=handleClose
  />;;
};