Installation

yarn add @reasonbr/bs-react-reveal react-reveal

Add the package to the bsconfig.json

{
 "bs-dependencies": [
  "@reasonbr/bs-react-reveal"
 ]
}

Usage

open ReactReveal;

[@react.component]
let make = () => {
  <Fade>
   <h1>{React.string("Fade animation...")</h1>
  </Fade>
}

Status

This is project is still WIP, but you can use all the components provided by react-reveal with the almost all props.

Supported features

• Components:
  • Reveal: ⚠️ - Not yet [WIP]
  • Fade: ✅
  • Flip: ✅
  • Rotate: ✅
  • Zoom: ✅
  • Bounce: ✅
  • Slide: ✅
  • Roll: ✅
  • LightSpeed: ✅
  • Jump: ✅
  • Flash: ✅
  • HeadShake: ✅
  • Jello: ✅
  • Pulse: ✅
  • RubberBand: ✅
  • Shake: ✅
  • Spin: ✅
  • Swing: ✅
  • Tada: ✅
  • Wobble: ✅
• Component props:
  • duration: ✅
  • delay: ✅
  • left: ✅
  • right: ✅
  • top: ✅
  • bottom: ✅
  • count: ✅
  • forever: ✅
  • mirror: ✅
  • opposite: ✅
  • distance: ✅
  • spy: ✅ ⚠️ - Only int values for now [WIP]
  • when: ✅ ⚠️ - Only bool values for now [WIP]
  • in: ✅ - ⚠️ Only bool values for now [WIP]
  • appear: ✅
  • enter: ✅
  • exit: ✅
  • timeout: ✅
  • mountOnEnter: ✅
  • unmountOnExit: ✅
  • force: ✅
  • refProp: ⚠️ - Not yet [WIP]
  • innerRef: ⚠️ - Not yet [WIP]
  • cascade: ✅
  • collapse: ✅
  • fraction: ✅
  • ssrFadeout: ✅
  • ssrReveal: ✅
  • wait: ✅
  • onReveal: ✅
• HOC's: ⚠️ - Not yet [WIP]
• Custom effects: ⚠️ - Not yet [WIP]

Docs

Check the official react-reveal documentation.