ReasonML Quick Start Guide

Using the components

Now, in App.re, we can change the render function to use these components. We'll change this:

<main> {currentRoute.component} </main>

Now it appears as follows:

<main>  ReactTransitionGroup.(    <TransitionGroup>      <CSSTransition        key={currentRoute.title} _in=true timeout=900 classNames="routeTransition">        {currentRoute.component}      </CSSTransition>    </TransitionGroup>  )</main>

Note: The key prop is a special ReactJS prop and should not be part of the component's props argument in ReasonReact.wrapJsForReason. The same is true for the special ReactJS ref prop.

For completeness, here is the corresponding CSS, which can be found in ReactTransitionGroup.scss:

@keyframes enter {  from {    opacity: 0;    transform: translateY(50px);  }}@keyframes ...