Transition

import { Transition } from 'react-laag';

Utility component that lets you transition the appearance / disappearance of the layer in a simple way. Best used if you want to use simple css-transitions like opacity or transform and don't want to depend on an animation library. For more complex transitions it is recommended to use tools like framer-motion or react-spring.

Props

fieldisOpen
Required
Type
boolean

Determines if the layer is currently open or closed.

fieldchildren
Required
Type
(isOpen: boolean, onTransitionEnd: (): void, isLeaving: boolean): ReactNode

Example

import * as React from "react";
import { ToggleLayer, Transition } from "react-laag";

<ToggleLayer
  renderLayer={({ isOpen, layerProps }) => (
    <Transition isOpen={isOpen}>
      {(isOpen, onTransitionEnd) => (
        <div
          ref={layerProps.ref}

          // 'onTransitionEnd' is required in order for '<Transition />'
          // to determine when the layer should be unmounted.
          onTransitionEnd={onTransitionEnd}
          style={{
            ...layerProps.style,
            // 'transition' is required for the 'onTransitionEnd' to fire
            transition: '0.2s ease-in-out'

            // declare styles based on whether the layer is open or closed
            opacity: isOpen ? 1 : 0
          }}
        >
          Layer
        </div>
      )}
    </Transition>
  )}
>
  {({ triggerRef, toggle }) => (
    <button ref={triggerRef} onClick={toggle}>
      Toggle
    </button>
  )}
</ToggleLayer>;