stephencookdev

const ForceCaseSensitivityPlugin = require("force-case-sensitivity-webpack-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");

module.exports = {
  entry: {
    app: ["./app.js"]
  },
  output: "./public",
  module: {
    rules: [

stephencookdev

const ForceCaseSensitivityPlugin = require("force-case-sensitivity-webpack-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({
  entry: {
    app: ["./app.js"]
  },

stephencookdev

import React from "react";
import { animateSwitch } from "./animateSwitch";
import { SlideOut } from "./SlideOut";

const SwitchWithSlide = animateSwitch(Switch, SlideOut);

export default () => (
  <SwitchWithSlide>
    <Route path="/a" component={PageA} />
    <Route path="/b" component={PageB} />

stephencookdev

render() {
  const {
    prevChild,
    curChild,
    childPosition,
    animationCallback,
  } = this.state;
  
  return (
    <Slider

stephencookdev

componentDidUpdate(prevProps, prevState) {
  const prevUniqId = prevProps.uniqKey || prevProps.children.type;
  const uniqId = this.props.uniqKey || this.props.children.type;

  if (prevUniqId !== uniqId) {
    this.setState({
      childPosition: Slider.TO_LEFT,
      curChild: this.props.children,
      curUniqId: uniqId,
      prevChild: prevProps.children,

stephencookdev

swapChildren = () => {
  this.setState({
    childPosition: Slider.FROM_RIGHT,
    prevChild: null,
    prevUniqId: null,
    animationCallback: null
  });
}

stephencookdev

render() {
  return (
    <Route
      render={({ location }) => (
        <SlideOut uniqKey={location.pathname}>
          <Switch location={location}>
            <Route path="/a" component={PathA} />
            <Route path="/b" component={PathB} />
          </Switch>
        </SlideOut>

stephencookdev

const animateSwitch = (CustomSwitch, AnimatorComponent) => ({
  children,
}) => (
  <Route
    render={({ location }) => (
      <AnimatorComponent uniqKey={location.pathname}>
        <CustomSwitch location={location}>{children}</CustomSwitch>
      </AnimatorComponent>
    )}
  />

stephencookdev

const App = () => (
  <Switch>
    <Route path="/a" component={PathA} />
    <Route path="/b" component={PathB} />
  </Switch>
);

stephencookdev

const SwitchWithSlide = animateSwitch(Switch, SlideOut);

const App = () => (
  <SwitchWithSlide>
    <Route path="/a" component={PathA} />
    <Route path="/b" component={PathB} />
  </SwitchWithSlide>
);