chronsyn / react-metro Goto Github PK

npm install react-metro

import Metro from "react-metro";

// in method renderMetroComponents:

// mount / unmount
if (!this.state.showMetroComponents) {
  return null;
}

const data = ["cat", "dog"];

return Metro.sequence(
  data,
  animationsMap, // optional
  defaultAnimation // optional
).map(data => {
  return (
    <Metro.animation
      {...data}
      wrapperType="div" // optional ul or whatever, defaults to div
      onClick={this.onClick.bind(this)} // optional
      enableClickDuringAnimation //optional, boolean (default false)
      onMount={this.onMountComplete.bind(this)} // optional
      onUnmount={this.onUnmountComplete.bind(this)} // optional
    >
      {" "}
      // optional
      <YourComponent {...data.content} />
    </Metro.animation>
  );
});

<TransitionGroupPlus>
  {" "}
  // optional arg type="li/div/ul..."
  {this.renderMetroComponents()}
</TransitionGroupPlus>

renderMetroContainer() {
  if (!this.state.showContainer) {
    return null;
  }

  const props = {
    wrapperType: "div",
    enableClickDuringAnimation: true,
    onMount: this.wrapMount.bind(this),
    onUnmount: this.wrapUnmount.bind(this)
  };

  return Metro.container(
    <div>...</div>, // base node: pass in text, wrap components
    containerAnimation, // optional
    props //optional
  );
}

// A wrapper for Metro.container that removes the need for having a conditional toggle in parent.
// Arguments:
// conditional property for toggling (bool), component (dom element), animation (object - optional), props (object optional)

renderLessVerboseContainer() {
  return Metro.bindContainer(bool, component, animation, props)
}

// Override Metro´s default animations settings for each unique item in your items
// array, see MetroTween args further down.
// The animation settings are combined with the default animation settings, so
// you only have to specify the values you want to change.
const animationMap = [
  {
    in: {
      time: 3,
      delay: 0
    },
    out: {
      time: 1.4,
      delay: 1
    },
    willEnter: {
      from: { opacity: 0, y: 120, x: 30 },
      to: { opacity: 1, y: 0, x: 0, ease: "easeInOutExpo" }
    }
  },
  {
    out: {
      time: 1.4,
      delay: 0
    },
    willEnter: {
      from: { opacity: 0, y: 120, x: -30 },
      to: { opacity: 1, y: 0, x: 0, ease: "easeInOutExpo" }
    }
  }
];

// Metro comes with a simple, fade in / out default. This object passed
// in as the third argument in the Metro.sequence overrides the default settings.
// The override settings are combined with the built in defaults, so you only
// have to specify the values you want to change.
const defaultAnimationOverride = {
  animation: {
    out: {
      time: 0.5,
      delay: 0
    },
    in: {
      time: 1,
      delay: 0
    },
    willEnter: {
      from: { opacity: 0, y: 50 },
      to: { opacity: 1, y: 0, ease: "easeInOutQuad" }
    },
    willLeave: {
      from: {
        opacity: 1,
        y: 0
      },
      to: { opacity: 0, y: 50, ease: "easeInOutQuad" }
    }
  }
};

easeInSine;
easeOutSine;
easeInOutSine;
easeInQuad;
easeOutQuad;
easeInOutQuad;
easeInCubic;
easeOutCubic;
easeInOutCubic;
easeInQuart;
easeOutQuart;
easeInOutQuart;
easeInQuint;
easeOutQuint;
easeInOutQuint;
easeInExpo;
easeOutExpo;
easeInOutExpo;
easeInCirc;
easeOutCirc;
easeInOutCirc;
easeInBack;
easeOutBack;
easeInOutBack;

x;
y;
skewX;
skewY;
scaleX;
scaleY;
rotation;
scale;

wrapperType; // dom element, defaults to div
onClick; // receives props (original array data), array index and animating
enableClickDuringAnimation; // boolean, defaults to false
onMount; // fires when the mount sequence completes
onUnmount; // fires when the unmount sequence completes

const domino = Metro.generateFocusMap(
  index, //focus - index of clicked component
  6, // columns
  this.state.data.length, // length of sequence
  this.state.preset // preset - dynamic in state or put directly as string 'dominoMulti'
  duration // optional (default 1 second)
)
this.setState({animationMap: domino}) // -> do unmount logic...