5
46%
MIT
Bucklescript bindings for react-transition-group
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-groupSetup
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
- RE
- ML
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>
/* ... */976: syntax error, consider adding a `;' beforejsx3
- RE
- ML
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>
/* ... */976: syntax error, consider adding a `;' beforeAlso check react-transition-group examples translated to reason-react here for jsx2, here for jsx3
Feel free to post issues.
