@reasonbr/bs-react-reveal

ReasonML bindings for ReactReveal

Usage no npm install needed!

<script type="module">
  import reasonbrBsReactReveal from 'https://cdn.skypack.dev/@reasonbr/bs-react-reveal';
</script>

README


Installation • Basic usage • Supported features



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.