pouncejs/dist/esm/components/FadeIn/FadeIn.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import Box from '../Box';
import { generateKeyframes } from './utils';

/**
 * A wrapper component to allow fading-in of children components, allowing a smooth enter into the
 * viewport
 */
var FadeIn = function FadeIn(_ref) {
  var as = _ref.as,
      _ref$from = _ref.from,
      from = _ref$from === void 0 ? 'center' : _ref$from,
      _ref$duration = _ref.duration,
      duration = _ref$duration === void 0 ? 300 : _ref$duration,
      _ref$delay = _ref.delay,
      delay = _ref$delay === void 0 ? 0 : _ref$delay,
      _ref$offset = _ref.offset,
      offset = _ref$offset === void 0 ? 25 : _ref$offset,
      children = _ref.children,
      rest = _objectWithoutPropertiesLoose(_ref, ["as", "from", "duration", "delay", "offset", "children"]);

  var keyframes = React.useMemo(function () {
    return generateKeyframes(from, offset);
  }, [from, offset]);
  return /*#__PURE__*/React.createElement(Box, _extends({
    as: as,
    willChange: "opacity" + (from !== 'center' ? ', transform' : ''),
    animation: keyframes + " " + duration + "ms " + delay + "ms ease-in-out both"
  }, rest), children);
};

export default FadeIn;