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
npm
Install,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.