How to use react-motion - 10 common examples

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import './DatePicker.less';
import DayPicker from '../DayPicker';
import { spring, presets, Motion } from 'react-motion';
import isEqual from 'lodash/isEqual';
import { splitProps, zeroTime } from '../utils';

let springPreset = presets.gentle;
let easeOutCubic = (t) => (--t) * t * t + 1; // eslint-disable-line no-param-reassign

let propTypes = {
  className: PropTypes.string,
  disabled: PropTypes.bool,
  locale: PropTypes.string,
  modifiers: PropTypes.object,
  onChange: PropTypes.func,
  showToLeft: PropTypes.bool,
  showToTop: PropTypes.bool,
  tabIndex: PropTypes.number,
  value: PropTypes.object
};

let defaultProps = {
  className: '',

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import './DateRangeInput.less';
import DayPicker from '../DayPicker';
import InputAddonButton from '../InputAddonButton';
import DateVariants from '../DateVariants';
import DateInputField from '../DateInputField';
import isEqual from 'lodash/isEqual';
import dayjs from '../../dayjs';
import { spring, presets, Motion } from 'react-motion';
import getMessage from '../translations';
import { splitProps, zeroTime } from '../utils';

let springPreset = presets.gentle;
let easeOutCubic = (t) => (--t) * t * t + 1; // eslint-disable-line no-param-reassign

let initialState = {
  enteredTo: null,
  showPicker: false,
  showVariants: false,
  error: false,
  focused: false
};

function isSelectingFirstDay(from, to, day) {
  let firstDayIsNotSelected = !from;
  let selectedDayIsBeforeFirstDay = day < from;
  let rangeIsSelected = from && to;
  return firstDayIsNotSelected || selectedDayIsBeforeFirstDay || rangeIsSelected;
}

} = this.props;

    const open = this.state.open && this.props.open;

    // If drawer isn't open or in the process of opening/closing, then remove it from the DOM
    // also, if we're not client side we need to return early because createPortal is only
    // a clientside method
    if ((!this.state.open && !this.props.open) || !isClientSide()) {
      return null;
    }

    const { touching } = this.state;

    const animationSpring = touching
      ? { damping: 20, stiffness: 300 }
      : presets.stiff;

    const hiddenPosition = this.getElementSize();

    const position = this.getPosition(hiddenPosition);

    // Style object for the container element
    let containerStyle = {
      backgroundColor: `rgba(55, 56, 56, ${open ? containerOpacity : 0})`
    };

    // If direction is right, we set the overflowX property to 'hidden' to hide the x scrollbar during
    // the sliding animation
    if (isDirectionRight(direction)) {
      containerStyle = {
        ...containerStyle,
        overflowX: "hidden"

render() {
    const { show } = this.props;

    return ReactDOM.createPortal(
      <div>
        {show ? (
          
            {things =&gt; (
              <div tabindex="{0}" role="button"> { this.node = node; }} style={{ opacity: things.x }} className="modal-backdrop" /&gt;
            )}
          
        ) : null}

        
          { stuff =&gt; (
            </div></div>

render() {
    const { showBackButton } = this.state;
    return (
      
        {({ x }) => (
          
        )}
      
    );
  }
  // #endregion

return (
      
        {children && {children}}
        
          {isShow ?  : }
        

        {/* Portal */}
        {isShow && (
          
            
              
                {items.map(e => )}
              
            
          
        )}
      
    );
  }
}

if (!isOpened && height > -1) {
          if (!keepCollapsedContent) {
            return null;
          }

          return _react2.default.createElement(
            'div',
            _extends({ style: _extends({ height: 0, overflow: 'hidden' }, style) }, props),
            content
          );
        }

        //  to prevent loosing input after causing this component to rerender
        return _react2.default.createElement(
          _reactMotion.Motion,
          {
            defaultStyle: { height: Math.max(0, height) },
            style: { height: Math.max(0, height) },
            onRest: onRest },
          function () {
            return _react2.default.createElement(
              'div',
              _extends({ style: _extends({}, newStyle, style) }, props),
              content
            );
          }
        );
      }

      return _react2.default.createElement(
        _reactMotion.Motion,

value: function render() {
      var _this4 = this;

      var _props = this.props,
          config = _props.config,
          style = _props.style;
      var width = style.width,
          height = style.height;

      var springConfig = config ? config : _reactMotion.presets.noWobble;

      // Styles
      var styles = _extends({
        height: height ? height : '100%',
        width: width ? width : '100%',
        overflow: 'hidden',
        position: 'relative'
      }, styles);

      return _react2.default.createElement(
        'div',
        {
          onWheel: this.onScrollStart,
          ref: function ref(r) {
            _this4.hScrollParent = r;
          },

"use strict";

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _reactMotion = require("react-motion");

var reorderKeys = _reactMotion.utils.reorderKeys;

var update = _react2["default"].addons;

var Demo = _react2["default"].createClass({
  displayName: "Demo",

  getInitialState: function getInitialState() {
    return {
      // Apparently Object.keys return keys in insertion order (except for 1,2,3).
      letters: {
        "#A": true,
        "#N": true,
        "#T": true
      }
    };
  },

animatorProps: (layout) => ({
        style: {
          width: spring(layout.width, presets.wobbly),
          height: spring(layout.height, presets.wobbly),
          top: spring(layout.top, presets.wobbly),
          right: spring(layout.right, presets.wobbly),
          bottom: spring(layout.bottom, presets.wobbly),
          left: spring(layout.left, presets.wobbly)
        }
      })
    });