Rescript Animated Accordion Item

AccordionItem.res

open Belt

@get
external getClientHeight: Dom.element => int = "clientHeight"

let useClientHeight = () => {
  let ref: React.ref<Js.Nullable.t<Dom.element>> = React.useRef(Js.Nullable.null)

  (ref, ref.current->Js.Nullable.toOption->Option.map(el => el->getClientHeight))
}

@react.component
let make = (~children, ~isOpen) => {
  let (ref, clientHeight) = useClientHeight()

  <div
    style={ReactDOM.Style.make(
      ~overflowY="hidden",
      ~maxHeight=isOpen ? `${clientHeight->Option.getWithDefault(0)->Int.toString}px` : "0",
      ~transition="max-height 225ms ease-in-out",
      (),
    )}>
    {React.cloneElement(children, {"ref": ref})}
  </div>
}