reason-transition-group

This is Bucklescript bindings for react-transition-group.

versions @2.x.x are written for jsx3 versions @1.x.x are written for jsx2

Install, npm

yarn add reason-transition-group

Setup

Add reason-transition-group to bs-depenencies in your bsconfig.json!

{
  /* ... */
  "bs-dependencies": [
    "reason-transition-group"
  ],
  /* ... */
}

Usage

Folow official docs of React Transition Group.

jsx2

open ReasonTransitionGroup

/* ... */
<Transition _in={inState} timeout=`int(500)>
...{state => <div>{state |> ReasonReact.string}</div>}
</Transiton>
/* ... */

/* ... */
<CSSTransition _in={inState} timeout=`obj(CSSTransition.timeoutFull(~enter: 500, ~exit:0, ())) classNames=`string(myClassName)>
...{state => <div>{state |> ReasonReact.string}</div>}
</CSSTransiton>
/* ... */


/* ... */
<CSSTransition _in={inState} timeout=`obj(CSSTransition.timeoutFull(~enter: int, ~exit:int, ())) classNames=`obj(CSSTransition.classFull(~appear: str, ~exit: str, ()))>
...{state => <div>{state |> ReasonReact.string}</div>}
</CSSTransiton>
/* ... */

jsx3

open ReasonTransitionGroup

/* ... */
<Transition _in={inState} timeout=`int(500)>
{state => <div>{state |> ReasonReact.string}</div>}
</Transiton>
/* ... */

/* ... */
<CSSTransition _in={inState} timeout=`obj(CSSTransition.timeoutFull(~enter: 500, ~exit:0, ())) classNames=`string(myClassName)>
{state => <div>{state |> ReasonReact.string}</div>}
</CSSTransiton>
/* ... */


/* ... */
<CSSTransition _in={inState} timeout=`obj(CSSTransition.timeoutFull(~enter: int, ~exit:int, ())) classNames=`obj(CSSTransition.classFull(~appear: str, ~exit: str, ()))>
{state => <div>{state |> ReasonReact.string}</div>}
</CSSTransiton>
/* ... */

Also check react-transition-group examples translated to reason-react here for jsx2, here for jsx3

Feel free to post issues.