react-router-transition - npm Package Compare versions

Comparing version 1.4.0 to 2.0.0

babel.config.js

+module.exports = {
+  presets: [
+    [
+      '@babel/preset-react',
+      {
+        useBuiltIns: true,
+      },
+    ],
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+      },
+    ],
+  ],
+};

index.js

+import React, {
+  cloneElement,
+  createElement,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import PropTypes from 'prop-types';
+
+import { Route, Switch, matchPath, useLocation } from 'react-router-dom';
+
+import TransitionMotion from 'react-motion/lib/TransitionMotion';
+import spring from 'react-motion/lib/spring';
+
+// Helpers
+
+function ensureSpring(styles) {
+  const obj = {};
+
+  for (var key in styles) {
+    const value = styles[key];
+    if (typeof value === 'number') {
+      obj[key] = spring(value);
+    } else {
+      obj[key] = value;
+    }
+  }
+
+  return obj;
+}
+
+function identity(v) {
+  return v;
+}
+
+function noop() {}
+
+// Components
+
+function RouteTransition({
+  children,
+  className,
+  atEnter,
+  atActive,
+  atLeave,
+  wrapperComponent = 'div',
+  didLeave = noop,
+  mapStyles = identity,
+  runOnMount = false,
+}) {
+  const defaultStyles =
+    runOnMount === false
+      ? null
+      : children == undefined
+      ? []
+      : [
+          {
+            key: children.key,
+            data: children,
+            style: atEnter,
+          },
+        ];
+
+  const styles =
+    children == undefined
+      ? []
+      : [
+          {
+            key: children.key,
+            data: children,
+            style: ensureSpring(atActive),
+          },
+        ];
+
+  return (
+    <TransitionMotion
+      defaultStyles={defaultStyles}
+      styles={styles}
+      willEnter={() => atEnter}
+      willLeave={() => ensureSpring(atLeave)}
+      didLeave={didLeave}
+    >
+      {(interpolatedStyles) => (
+        <div className={className}>
+          {interpolatedStyles.map((config) => {
+            const props = {
+              style: mapStyles(config.style),
+              key: config.key,
+            };
+
+            return wrapperComponent !== false
+              ? createElement(wrapperComponent, props, config.data)
+              : cloneElement(config.data, props);
+          })}
+        </div>
+      )}
+    </TransitionMotion>
+  );
+}
+
+RouteTransition.propTypes = {
+  className: PropTypes.string,
+  wrapperComponent: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.element,
+    PropTypes.string,
+    PropTypes.func,
+  ]),
+  atEnter: PropTypes.object.isRequired,
+  atActive: PropTypes.object.isRequired,
+  atLeave: PropTypes.object.isRequired,
+  didLeave: PropTypes.func,
+  mapStyles: PropTypes.func,
+  runOnMount: PropTypes.bool,
+};
+
+// AnimatedRoute
+
+// The key-getter for RouteTransition. It's either on or off.
+function getKey({ pathname }, path, exact) {
+  return matchPath(pathname, { exact, path }) ? 'match' : 'no-match';
+}
+
+function AnimatedRoute({
+  render,
+  component,
+  path,
+  exact,
+  ...routeTransitionProps
+}) {
+  const location = useLocation();
+
+  return (
+    <RouteTransition {...routeTransitionProps}>
+      <Route
+        key={getKey(location, path, exact)}
+        path={path}
+        exact={exact}
+        location={location}
+        component={component}
+        render={render}
+      />
+    </RouteTransition>
+  );
+}
+
+// AnimatedSwitch
+
+const NO_MATCH = {
+  key: 'no-match',
+};
+
+// Not every location object has a `key` property (e.g. HashHistory).
+function getLocationKey(location) {
+  return typeof location.key === 'string' ? location.key : '';
+}
+
+// Some superfluous work, but something we need to do in order
+// to persist matches/allow for nesting/etc.
+function getMatchedRoute(children, { pathname }) {
+  const childrenArray = React.Children.toArray(children);
+
+  for (let i = 0; i < childrenArray.length; i++) {
+    const child = childrenArray[i];
+    const matches = matchPath(pathname, {
+      exact: child.props.exact,
+      path: child.props.path,
+    });
+
+    if (matches) {
+      return child;
+    }
+  }
+
+  return NO_MATCH;
+}
+
+let counter = 0;
+
+function AnimatedSwitch({ children, ...routeTransitionProps }) {
+  const location = useLocation();
+  const match = useRef(null);
+  const key = useRef(null);
+
+  const nextMatch = getMatchedRoute(children, location);
+
+  if (match.current === null) {
+    // Persist a reference to the most recent match
+    match.current = nextMatch;
+    key.current = getLocationKey(location);
+
+  } else if (match.current.key !== nextMatch.key) {
+    // Update the key given to Switch anytime the matched route changes
+    match.current = nextMatch;
+    key.current = getLocationKey(location) + ++counter;
+  }
+
+  return (
+    <RouteTransition {...routeTransitionProps}>
+      <Switch key={key.current} location={location}>
+        {children}
+      </Switch>
+    </RouteTransition>
+  );
+}
+
+export { ensureSpring, spring, RouteTransition, AnimatedRoute, AnimatedSwitch };

lib/index.js

@@ -1,41 +0,176 @@
-'use strict';
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-exports.__esModule = true;
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var _AnimatedRoute = require('./AnimatedRoute');
+import React, { cloneElement, createElement, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Route, Switch, matchPath, useLocation } from 'react-router-dom';
+import TransitionMotion from 'react-motion/lib/TransitionMotion';
+import spring from 'react-motion/lib/spring'; // Helpers
 
-Object.defineProperty(exports, 'AnimatedRoute', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_AnimatedRoute).default;
-  }
-});
+function ensureSpring(styles) {
+  var obj = {};
 
-var _AnimatedSwitch = require('./AnimatedSwitch');
+  for (var key in styles) {
+    var value = styles[key];
 
-Object.defineProperty(exports, 'AnimatedSwitch', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_AnimatedSwitch).default;
+    if (typeof value === 'number') {
+      obj[key] = spring(value);
+    } else {
+      obj[key] = value;
+    }
   }
-});
 
-var _RouteTransition = require('./RouteTransition');
+  return obj;
+}
 
-Object.defineProperty(exports, 'RouteTransition', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_RouteTransition).default;
+function identity(v) {
+  return v;
+}
+
+function noop() {} // Components
+
+
+function RouteTransition(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      atEnter = _ref.atEnter,
+      atActive = _ref.atActive,
+      atLeave = _ref.atLeave,
+      _ref$wrapperComponent = _ref.wrapperComponent,
+      wrapperComponent = _ref$wrapperComponent === void 0 ? 'div' : _ref$wrapperComponent,
+      _ref$didLeave = _ref.didLeave,
+      didLeave = _ref$didLeave === void 0 ? noop : _ref$didLeave,
+      _ref$mapStyles = _ref.mapStyles,
+      mapStyles = _ref$mapStyles === void 0 ? identity : _ref$mapStyles,
+      _ref$runOnMount = _ref.runOnMount,
+      runOnMount = _ref$runOnMount === void 0 ? false : _ref$runOnMount;
+  var defaultStyles = runOnMount === false ? null : children == undefined ? [] : [{
+    key: children.key,
+    data: children,
+    style: atEnter
+  }];
+  var styles = children == undefined ? [] : [{
+    key: children.key,
+    data: children,
+    style: ensureSpring(atActive)
+  }];
+  return React.createElement(TransitionMotion, {
+    defaultStyles: defaultStyles,
+    styles: styles,
+    willEnter: function willEnter() {
+      return atEnter;
+    },
+    willLeave: function willLeave() {
+      return ensureSpring(atLeave);
+    },
+    didLeave: didLeave
+  }, function (interpolatedStyles) {
+    return React.createElement("div", {
+      className: className
+    }, interpolatedStyles.map(function (config) {
+      var props = {
+        style: mapStyles(config.style),
+        key: config.key
+      };
+      return wrapperComponent !== false ? createElement(wrapperComponent, props, config.data) : cloneElement(config.data, props);
+    }));
+  });
+}
+
+RouteTransition.propTypes = {
+  className: PropTypes.string,
+  wrapperComponent: PropTypes.oneOfType([PropTypes.bool, PropTypes.element, PropTypes.string, PropTypes.func]),
+  atEnter: PropTypes.object.isRequired,
+  atActive: PropTypes.object.isRequired,
+  atLeave: PropTypes.object.isRequired,
+  didLeave: PropTypes.func,
+  mapStyles: PropTypes.func,
+  runOnMount: PropTypes.bool
+}; // AnimatedRoute
+// The key-getter for RouteTransition. It's either on or off.
+
+function getKey(_ref2, path, exact) {
+  var pathname = _ref2.pathname;
+  return matchPath(pathname, {
+    exact: exact,
+    path: path
+  }) ? 'match' : 'no-match';
+}
+
+function AnimatedRoute(_ref3) {
+  var render = _ref3.render,
+      component = _ref3.component,
+      path = _ref3.path,
+      exact = _ref3.exact,
+      routeTransitionProps = _objectWithoutProperties(_ref3, ["render", "component", "path", "exact"]);
+
+  var location = useLocation();
+  return React.createElement(RouteTransition, routeTransitionProps, React.createElement(Route, {
+    key: getKey(location, path, exact),
+    path: path,
+    exact: exact,
+    location: location,
+    component: component,
+    render: render
+  }));
+} // AnimatedSwitch
+
+
+var NO_MATCH = {
+  key: 'no-match'
+}; // Not every location object has a `key` property (e.g. HashHistory).
+
+function getLocationKey(location) {
+  return typeof location.key === 'string' ? location.key : '';
+} // Some superfluous work, but something we need to do in order
+// to persist matches/allow for nesting/etc.
+
+
+function getMatchedRoute(children, _ref4) {
+  var pathname = _ref4.pathname;
+  var childrenArray = React.Children.toArray(children);
+
+  for (var i = 0; i < childrenArray.length; i++) {
+    var child = childrenArray[i];
+    var matches = matchPath(pathname, {
+      exact: child.props.exact,
+      path: child.props.path
+    });
+
+    if (matches) {
+      return child;
+    }
   }
-});
 
-var _spring = require('./spring');
+  return NO_MATCH;
+}
 
-Object.defineProperty(exports, 'spring', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_spring).default;
+var counter = 0;
+
+function AnimatedSwitch(_ref5) {
+  var children = _ref5.children,
+      routeTransitionProps = _objectWithoutProperties(_ref5, ["children"]);
+
+  var location = useLocation();
+  var match = useRef(null);
+  var key = useRef(null);
+  var nextMatch = getMatchedRoute(children, location);
+
+  if (match.current === null) {
+    // Persist a reference to the most recent match
+    match.current = nextMatch;
+    key.current = getLocationKey(location);
+  } else if (match.current.key !== nextMatch.key) {
+    // Update the key given to Switch anytime the matched route changes
+    match.current = nextMatch;
+    key.current = getLocationKey(location) + ++counter;
   }
-});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  return React.createElement(RouteTransition, routeTransitionProps, React.createElement(Switch, {
+    key: key.current,
+    location: location
+  }, children));
+}
+
+export { ensureSpring, spring, RouteTransition, AnimatedRoute, AnimatedSwitch };

package.json

 {
   "name": "react-router-transition",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "A thin layer over react-motion for animating routes in react-router.",
-  "main": "lib/react-router-transition.js",
-  "module": "es/index.js",
-  "jsnext:main": "es/index.js",
+  "main": "lib/index.js",
   "scripts": {
-    "build": "npm run build:xmd && npm run build:commonjs && npm run build:module",
-    "build:xmd": "webpack",
-    "build:commonjs": "BABEL_ENV=commonjs babel src --out-dir lib",
-    "build:module": "BABEL_ENV=module babel src --out-dir es",
-    "clean": "rm -rf lib es",
+    "build": "babel index.js --out-dir lib",
+    "clean": "rm -rf lib",
     "gh-pages": "git b -D gh-pages && git co -b gh-pages && (cd example && npm run build) && cp example/{index.html,bundle.js} ./ && cp index.html 404.html && git add . && git commit -m 'gh-pages' && git push origin gh-pages --force",
-    "prepublish": "rm -fr lib && npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "prettier": "prettier --print-width=80 --tab-width=2 --bracket-spacing=true --single-quote=true --trailing-comma=all --write ./src/*.js"
+    "prepublishOnly": "npm run clean && npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -37,49 +31,20 @@ "repository": {
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0",
-    "react-router-dom": "^4.1.1"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "prop-types": "^15.5.10",
-    "react-motion": "^0.5.0"
+    "prop-types": "^15.7.2",
+    "react-motion": "^0.5.2"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.24.1",
-    "babel-loader": "^7.0.0",
-    "babel-plugin-check-es2015-constants": "^6.22.0",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
-    "babel-plugin-transform-es2015-block-scoped-functions": "^6.22.0",
-    "babel-plugin-transform-es2015-block-scoping": "^6.26.0",
-    "babel-plugin-transform-es2015-classes": "^6.24.1",
-    "babel-plugin-transform-es2015-computed-properties": "^6.24.1",
-    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
-    "babel-plugin-transform-es2015-duplicate-keys": "^6.24.1",
-    "babel-plugin-transform-es2015-for-of": "^6.23.0",
-    "babel-plugin-transform-es2015-function-name": "^6.24.1",
-    "babel-plugin-transform-es2015-literals": "^6.22.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
-    "babel-plugin-transform-es2015-object-super": "^6.24.1",
-    "babel-plugin-transform-es2015-parameters": "^6.24.1",
-    "babel-plugin-transform-es2015-shorthand-properties": "^6.24.1",
-    "babel-plugin-transform-es2015-spread": "^6.22.0",
-    "babel-plugin-transform-es2015-sticky-regex": "^6.24.1",
-    "babel-plugin-transform-es2015-template-literals": "^6.22.0",
-    "babel-plugin-transform-es2015-typeof-symbol": "^6.23.0",
-    "babel-plugin-transform-es2015-unicode-regex": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-plugin-transform-react-display-name": "^6.25.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.5",
-    "babel-plugin-transform-regenerator": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "prettier": "^1.3.1",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "webpack": "^2.6.1"
+    "@babel/cli": "^7.6.2",
+    "@babel/core": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
+    "@babel/preset-react": "^7.0.0",
+    "prettier": "^1.18.2",
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
+    "react-router-dom": "^5.1.2"
   }
 }

README.md

@@ -5,5 +5,7 @@ # React Router Transition
 
-- v4-first
-- backward-compatible with previous versions of `react-router`
+### Requirements
 
+To use the latest version of this package (`2.x`), you'll need to use a version
+of React compatible with hooks, as well as version `5.x` of `react-router-dom`.
+
 ### Installation
@@ -10,0 +12,0 @@

es/AnimatedRoute.js

-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-import React from 'react';
-import { Route, matchPath } from 'react-router-dom';
-
-import RouteTransition from './RouteTransition';
-
-/**
- * Here we only care about whether or not the pathname matches. If so,
- * we'll use the route's path as the key, otherwise we'll default it
- * to a string signifying no match.
- */
-function getKey(_ref, path, exact) {
-  var pathname = _ref.pathname;
-
-  return matchPath(pathname, { exact: exact, path: path }) ? 'match' : 'no-match';
-}
-
-var AnimatedRoute = function AnimatedRoute(_ref2) {
-  var _render = _ref2.render,
-      component = _ref2.component,
-      path = _ref2.path,
-      exact = _ref2.exact,
-      routeTransitionProps = _objectWithoutProperties(_ref2, ['render', 'component', 'path', 'exact']);
-
-  return React.createElement(Route, {
-    render: function render(_ref3) {
-      var location = _ref3.location,
-          match = _ref3.match;
-      return React.createElement(
-        RouteTransition,
-        routeTransitionProps,
-        React.createElement(Route, {
-          key: getKey(location, path, exact),
-          path: path,
-          exact: exact,
-          location: location,
-          component: component,
-          render: _render
-        })
-      );
-    }
-  });
-};
-
-export default AnimatedRoute;

es/AnimatedSwitch.js

-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; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-import React from 'react';
-import { Route, Switch, matchPath } from 'react-router-dom';
-import PropTypes from 'prop-types';
-
-import RouteTransition from './RouteTransition';
-
-var NO_MATCH = {
-  key: 'no-match'
-};
-
-/**
- * Not every location object has a `key` property (e.g. HashHistory).
- */
-function getLocationKey(location) {
-  return typeof location.key === 'string' ? location.key : '';
-}
-
-/**
- * Some superfluous work, but something we need to do in order
- * to persist matches/allow for nesting/etc.
- */
-function getMatchedRoute(children, pathname) {
-  return React.Children.toArray(children).find(function (child) {
-    return matchPath(pathname, {
-      exact: child.props.exact,
-      path: child.props.path
-    });
-  }) || NO_MATCH;
-}
-
-var AnimatedSwitch = function (_React$Component) {
-  _inherits(AnimatedSwitch, _React$Component);
-
-  function AnimatedSwitch() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, AnimatedSwitch);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AnimatedSwitch.__proto__ || Object.getPrototypeOf(AnimatedSwitch)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      key: getLocationKey(_this.props.location),
-      match: getMatchedRoute(_this.props.children, _this.props.location.pathname)
-    }, _this.matches = 0, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(AnimatedSwitch, [{
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      var nextMatch = getMatchedRoute(nextProps.children, nextProps.location.pathname);
-
-      if (this.state.match.key !== nextMatch.key) {
-        this.setState({
-          match: nextMatch,
-          key: getLocationKey(nextProps.location) + ++this.matches
-        });
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          children = _props.children,
-          location = _props.location,
-          match = _props.match,
-          routeTransitionProps = _objectWithoutProperties(_props, ['children', 'location', 'match']);
-
-      return React.createElement(
-        RouteTransition,
-        routeTransitionProps,
-        React.createElement(
-          Switch,
-          { key: this.state.key, location: location },
-          children
-        )
-      );
-    }
-  }]);
-
-  return AnimatedSwitch;
-}(React.Component);
-
-// inject location as a prop so we can listen for changes
-
-
-AnimatedSwitch.propTypes = {
-  location: PropTypes.shape({
-    key: PropTypes.string,
-    pathname: PropTypes.string
-  })
-};
-var RouteWrapper = function RouteWrapper(props) {
-  return React.createElement(Route, {
-    children: function children(_ref2) {
-      var location = _ref2.location;
-      return React.createElement(AnimatedSwitch, _extends({ location: location }, props));
-    }
-  });
-};
-
-export default RouteWrapper;

es/ensureSpring.js

-import spring from './spring';
-
-export default function ensureSpring(styles) {
-  return Object.keys(styles).reduce(function (acc, key) {
-    var value = styles[key];
-    acc[key] = typeof value === 'number' ? spring(value) : value;
-    return acc;
-  }, {});
-}

es/index.js

-export { default as AnimatedRoute } from './AnimatedRoute';
-export { default as AnimatedSwitch } from './AnimatedSwitch';
-export { default as RouteTransition } from './RouteTransition';
-export { default as spring } from './spring';

es/RouteTransition.js

-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-import React, { cloneElement, createElement, Component } from 'react';
-import TransitionMotion from 'react-motion/lib/TransitionMotion';
-import PropTypes from 'prop-types';
-
-import ensureSpring from './ensureSpring';
-
-var identity = function identity(val) {
-  return val;
-};
-
-var RouteTransition = function (_Component) {
-  _inherits(RouteTransition, _Component);
-
-  function RouteTransition() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, RouteTransition);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RouteTransition.__proto__ || Object.getPrototypeOf(RouteTransition)).call.apply(_ref, [this].concat(args))), _this), _this.willEnter = function () {
-      return _this.props.atEnter;
-    }, _this.willLeave = function () {
-      return ensureSpring(_this.props.atLeave);
-    }, _this.didLeave = function (styleThatLeft) {
-      if (_this.props.didLeave) {
-        _this.props.didLeave(styleThatLeft);
-      }
-    }, _this.renderRoute = function (config) {
-      var props = {
-        style: _this.props.mapStyles(config.style),
-        key: config.key
-      };
-
-      return _this.props.wrapperComponent !== false ? createElement(_this.props.wrapperComponent, props, config.data) : cloneElement(config.data, props);
-    }, _this.renderRoutes = function (interpolatedStyles) {
-      return React.createElement(
-        'div',
-        { className: _this.props.className },
-        interpolatedStyles.map(_this.renderRoute)
-      );
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(RouteTransition, [{
-    key: 'getDefaultStyles',
-    value: function getDefaultStyles() {
-      if (!this.props.runOnMount) {
-        return null;
-      }
-
-      if (!this.props.children) {
-        return [];
-      }
-
-      return [{
-        key: this.props.children.key,
-        data: this.props.children,
-        style: this.props.atEnter
-      }];
-    }
-
-    // there's only ever one route mounted at a time,
-    // so just return the current match
-
-  }, {
-    key: 'getStyles',
-    value: function getStyles() {
-      if (!this.props.children) {
-        return [];
-      }
-
-      return [{
-        key: this.props.children.key,
-        data: this.props.children,
-        style: ensureSpring(this.props.atActive)
-      }];
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        TransitionMotion,
-        {
-          defaultStyles: this.getDefaultStyles(),
-          styles: this.getStyles(),
-          willEnter: this.willEnter,
-          willLeave: this.willLeave,
-          didLeave: this.didLeave
-        },
-        this.renderRoutes
-      );
-    }
-  }]);
-
-  return RouteTransition;
-}(Component);
-
-RouteTransition.defaultProps = {
-  wrapperComponent: 'div',
-  runOnMount: false,
-  mapStyles: identity
-};
-RouteTransition.propTypes = {
-  className: PropTypes.string,
-  wrapperComponent: PropTypes.oneOfType([PropTypes.bool, PropTypes.element, PropTypes.string]),
-  atEnter: PropTypes.object.isRequired,
-  atActive: PropTypes.object.isRequired,
-  atLeave: PropTypes.object.isRequired,
-  didLeave: PropTypes.func,
-  mapStyles: PropTypes.func.isRequired,
-  runOnMount: PropTypes.bool.isRequired
-};
-
-
-export default RouteTransition;

es/spring.js

-export { default } from 'react-motion/lib/spring';

lib/AnimatedRoute.js

-'use strict';
-
-exports.__esModule = true;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactRouterDom = require('react-router-dom');
-
-var _RouteTransition = require('./RouteTransition');
-
-var _RouteTransition2 = _interopRequireDefault(_RouteTransition);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-/**
- * Here we only care about whether or not the pathname matches. If so,
- * we'll use the route's path as the key, otherwise we'll default it
- * to a string signifying no match.
- */
-function getKey(_ref, path, exact) {
-  var pathname = _ref.pathname;
-
-  return (0, _reactRouterDom.matchPath)(pathname, { exact: exact, path: path }) ? 'match' : 'no-match';
-}
-
-var AnimatedRoute = function AnimatedRoute(_ref2) {
-  var _render = _ref2.render,
-      component = _ref2.component,
-      path = _ref2.path,
-      exact = _ref2.exact,
-      routeTransitionProps = _objectWithoutProperties(_ref2, ['render', 'component', 'path', 'exact']);
-
-  return _react2.default.createElement(_reactRouterDom.Route, {
-    render: function render(_ref3) {
-      var location = _ref3.location,
-          match = _ref3.match;
-      return _react2.default.createElement(
-        _RouteTransition2.default,
-        routeTransitionProps,
-        _react2.default.createElement(_reactRouterDom.Route, {
-          key: getKey(location, path, exact),
-          path: path,
-          exact: exact,
-          location: location,
-          component: component,
-          render: _render
-        })
-      );
-    }
-  });
-};
-
-exports.default = AnimatedRoute;

lib/AnimatedSwitch.js

-'use strict';
-
-exports.__esModule = true;
-
-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; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactRouterDom = require('react-router-dom');
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _RouteTransition = require('./RouteTransition');
-
-var _RouteTransition2 = _interopRequireDefault(_RouteTransition);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var NO_MATCH = {
-  key: 'no-match'
-};
-
-/**
- * Not every location object has a `key` property (e.g. HashHistory).
- */
-function getLocationKey(location) {
-  return typeof location.key === 'string' ? location.key : '';
-}
-
-/**
- * Some superfluous work, but something we need to do in order
- * to persist matches/allow for nesting/etc.
- */
-function getMatchedRoute(children, pathname) {
-  return _react2.default.Children.toArray(children).find(function (child) {
-    return (0, _reactRouterDom.matchPath)(pathname, {
-      exact: child.props.exact,
-      path: child.props.path
-    });
-  }) || NO_MATCH;
-}
-
-var AnimatedSwitch = function (_React$Component) {
-  _inherits(AnimatedSwitch, _React$Component);
-
-  function AnimatedSwitch() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, AnimatedSwitch);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AnimatedSwitch.__proto__ || Object.getPrototypeOf(AnimatedSwitch)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      key: getLocationKey(_this.props.location),
-      match: getMatchedRoute(_this.props.children, _this.props.location.pathname)
-    }, _this.matches = 0, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(AnimatedSwitch, [{
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      var nextMatch = getMatchedRoute(nextProps.children, nextProps.location.pathname);
-
-      if (this.state.match.key !== nextMatch.key) {
-        this.setState({
-          match: nextMatch,
-          key: getLocationKey(nextProps.location) + ++this.matches
-        });
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          children = _props.children,
-          location = _props.location,
-          match = _props.match,
-          routeTransitionProps = _objectWithoutProperties(_props, ['children', 'location', 'match']);
-
-      return _react2.default.createElement(
-        _RouteTransition2.default,
-        routeTransitionProps,
-        _react2.default.createElement(
-          _reactRouterDom.Switch,
-          { key: this.state.key, location: location },
-          children
-        )
-      );
-    }
-  }]);
-
-  return AnimatedSwitch;
-}(_react2.default.Component);
-
-// inject location as a prop so we can listen for changes
-
-
-var RouteWrapper = function RouteWrapper(props) {
-  return _react2.default.createElement(_reactRouterDom.Route, {
-    children: function children(_ref2) {
-      var location = _ref2.location;
-      return _react2.default.createElement(AnimatedSwitch, _extends({ location: location }, props));
-    }
-  });
-};
-
-exports.default = RouteWrapper;

lib/ensureSpring.js

-'use strict';
-
-exports.__esModule = true;
-exports.default = ensureSpring;
-
-var _spring = require('./spring');
-
-var _spring2 = _interopRequireDefault(_spring);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ensureSpring(styles) {
-  return Object.keys(styles).reduce(function (acc, key) {
-    var value = styles[key];
-    acc[key] = typeof value === 'number' ? (0, _spring2.default)(value) : value;
-    return acc;
-  }, {});
-}

lib/RouteTransition.js

-'use strict';
-
-exports.__esModule = true;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _TransitionMotion = require('react-motion/lib/TransitionMotion');
-
-var _TransitionMotion2 = _interopRequireDefault(_TransitionMotion);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _ensureSpring = require('./ensureSpring');
-
-var _ensureSpring2 = _interopRequireDefault(_ensureSpring);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var identity = function identity(val) {
-  return val;
-};
-
-var RouteTransition = function (_Component) {
-  _inherits(RouteTransition, _Component);
-
-  function RouteTransition() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, RouteTransition);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RouteTransition.__proto__ || Object.getPrototypeOf(RouteTransition)).call.apply(_ref, [this].concat(args))), _this), _this.willEnter = function () {
-      return _this.props.atEnter;
-    }, _this.willLeave = function () {
-      return (0, _ensureSpring2.default)(_this.props.atLeave);
-    }, _this.didLeave = function (styleThatLeft) {
-      if (_this.props.didLeave) {
-        _this.props.didLeave(styleThatLeft);
-      }
-    }, _this.renderRoute = function (config) {
-      var props = {
-        style: _this.props.mapStyles(config.style),
-        key: config.key
-      };
-
-      return _this.props.wrapperComponent !== false ? (0, _react.createElement)(_this.props.wrapperComponent, props, config.data) : (0, _react.cloneElement)(config.data, props);
-    }, _this.renderRoutes = function (interpolatedStyles) {
-      return _react2.default.createElement(
-        'div',
-        { className: _this.props.className },
-        interpolatedStyles.map(_this.renderRoute)
-      );
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(RouteTransition, [{
-    key: 'getDefaultStyles',
-    value: function getDefaultStyles() {
-      if (!this.props.runOnMount) {
-        return null;
-      }
-
-      if (!this.props.children) {
-        return [];
-      }
-
-      return [{
-        key: this.props.children.key,
-        data: this.props.children,
-        style: this.props.atEnter
-      }];
-    }
-
-    // there's only ever one route mounted at a time,
-    // so just return the current match
-
-  }, {
-    key: 'getStyles',
-    value: function getStyles() {
-      if (!this.props.children) {
-        return [];
-      }
-
-      return [{
-        key: this.props.children.key,
-        data: this.props.children,
-        style: (0, _ensureSpring2.default)(this.props.atActive)
-      }];
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return _react2.default.createElement(
-        _TransitionMotion2.default,
-        {
-          defaultStyles: this.getDefaultStyles(),
-          styles: this.getStyles(),
-          willEnter: this.willEnter,
-          willLeave: this.willLeave,
-          didLeave: this.didLeave
-        },
-        this.renderRoutes
-      );
-    }
-  }]);
-
-  return RouteTransition;
-}(_react.Component);
-
-RouteTransition.defaultProps = {
-  wrapperComponent: 'div',
-  runOnMount: false,
-  mapStyles: identity
-};
-exports.default = RouteTransition;

lib/spring.js

-'use strict';
-
-exports.__esModule = true;
-
-var _spring = require('react-motion/lib/spring');
-
-Object.defineProperty(exports, 'default', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_spring).default;
-  }
-});
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

src/AnimatedRoute.js

-import React from 'react';
-import { Route, matchPath } from 'react-router-dom';
-
-import RouteTransition from './RouteTransition';
-
-/**
- * Here we only care about whether or not the pathname matches. If so,
- * we'll use the route's path as the key, otherwise we'll default it
- * to a string signifying no match.
- */
-function getKey({ pathname }, path, exact) {
-  return matchPath(pathname, { exact, path }) ? 'match' : 'no-match';
-}
-
-const AnimatedRoute = ({ render, component, path, exact, ...routeTransitionProps }) => (
-  <Route
-    render={({ location, match }) => (
-      <RouteTransition {...routeTransitionProps}>
-        <Route
-          key={getKey(location, path, exact)}
-          path={path}
-          exact={exact}
-          location={location}
-          component={component}
-          render={render}
-        />
-      </RouteTransition>
-    )}
-  />
-);
-
-export default AnimatedRoute;

src/AnimatedSwitch.js

-import React from 'react';
-import { Route, Switch, matchPath } from 'react-router-dom';
-import PropTypes from 'prop-types';
-
-import RouteTransition from './RouteTransition';
-
-const NO_MATCH = {
-  key: 'no-match',
-};
-
-/**
- * Not every location object has a `key` property (e.g. HashHistory).
- */
-function getLocationKey(location) {
-  return typeof location.key === 'string' ? location.key : '';
-}
-
-/**
- * Some superfluous work, but something we need to do in order
- * to persist matches/allow for nesting/etc.
- */
-function getMatchedRoute(children, pathname) {
-  return React.Children.toArray(children).find(child => {
-    return matchPath(pathname, {
-      exact: child.props.exact,
-      path: child.props.path,
-    });
-  }) || NO_MATCH;
-}
-
-class AnimatedSwitch extends React.Component {
-  static propTypes = {
-    location: PropTypes.shape({
-      key: PropTypes.string,
-      pathname: PropTypes.string,
-    }),
-  };
-
-  state = {
-    key: getLocationKey(this.props.location),
-    match: getMatchedRoute(this.props.children, this.props.location.pathname),
-  };
-
-  matches = 0;
-
-  componentWillReceiveProps(nextProps) {
-    const nextMatch = getMatchedRoute(
-      nextProps.children,
-      nextProps.location.pathname,
-    );
-
-    if (this.state.match.key !== nextMatch.key) {
-      this.setState({
-        match: nextMatch,
-        key: getLocationKey(nextProps.location) + ++this.matches,
-      });
-    }
-  }
-
-  render() {
-    const { children, location, match, ...routeTransitionProps } = this.props;
-
-    return (
-      <RouteTransition {...routeTransitionProps}>
-        <Switch key={this.state.key} location={location}>
-          {children}
-        </Switch>
-      </RouteTransition>
-    );
-  }
-}
-
-// inject location as a prop so we can listen for changes
-const RouteWrapper = props => (
-  <Route
-    children={({ location }) => (
-      <AnimatedSwitch location={location} {...props} />
-    )}
-  />
-);
-
-export default RouteWrapper;

src/ensureSpring.js

-import spring from './spring';
-
-export default function ensureSpring(styles) {
-  return Object.keys(styles).reduce((acc, key) => {
-    const value = styles[key];
-    acc[key] = typeof value === 'number' ? spring(value) : value;
-    return acc;
-  }, {});
-}

src/index.js

-export { default as AnimatedRoute } from './AnimatedRoute';
-export { default as AnimatedSwitch } from './AnimatedSwitch';
-export { default as RouteTransition } from './RouteTransition';
-export { default as spring } from './spring';

src/RouteTransition.js

-import React, { cloneElement, createElement, Component } from 'react';
-import TransitionMotion from 'react-motion/lib/TransitionMotion';
-import PropTypes from 'prop-types';
-
-import ensureSpring from './ensureSpring';
-
-const identity = val => val;
-
-class RouteTransition extends Component {
-  static defaultProps = {
-    wrapperComponent: 'div',
-    runOnMount: false,
-    mapStyles: identity,
-  };
-
-  static propTypes = {
-    className: PropTypes.string,
-    wrapperComponent: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.element,
-      PropTypes.string,
-    ]),
-    atEnter: PropTypes.object.isRequired,
-    atActive: PropTypes.object.isRequired,
-    atLeave: PropTypes.object.isRequired,
-    didLeave: PropTypes.func,
-    mapStyles: PropTypes.func.isRequired,
-    runOnMount: PropTypes.bool.isRequired,
-  };
-
-  getDefaultStyles() {
-    if (!this.props.runOnMount) {
-      return null;
-    }
-
-    if (!this.props.children) {
-      return [];
-    }
-
-    return [
-      {
-        key: this.props.children.key,
-        data: this.props.children,
-        style: this.props.atEnter,
-      },
-    ];
-  }
-
-  // there's only ever one route mounted at a time,
-  // so just return the current match
-  getStyles() {
-    if (!this.props.children) {
-      return [];
-    }
-
-    return [
-      {
-        key: this.props.children.key,
-        data: this.props.children,
-        style: ensureSpring(this.props.atActive),
-      },
-    ];
-  }
-
-  willEnter = () => {
-    return this.props.atEnter;
-  };
-
-  willLeave = () => {
-    return ensureSpring(this.props.atLeave);
-  };
-
-  didLeave = (styleThatLeft) => {
-    if (this.props.didLeave) {
-      this.props.didLeave(styleThatLeft);
-    }
-  }
-
-  renderRoute = config => {
-    const props = {
-      style: this.props.mapStyles(config.style),
-      key: config.key,
-    };
-
-    return this.props.wrapperComponent !== false
-      ? createElement(this.props.wrapperComponent, props, config.data)
-      : cloneElement(config.data, props);
-  };
-
-  renderRoutes = interpolatedStyles => {
-    return (
-      <div className={this.props.className}>
-        {interpolatedStyles.map(this.renderRoute)}
-      </div>
-    );
-  };
-
-  render() {
-    return (
-      <TransitionMotion
-        defaultStyles={this.getDefaultStyles()}
-        styles={this.getStyles()}
-        willEnter={this.willEnter}
-        willLeave={this.willLeave}
-        didLeave={this.didLeave}
-      >
-        {this.renderRoutes}
-      </TransitionMotion>
-    );
-  }
-}
-
-export default RouteTransition;

src/spring.js

-export { default } from 'react-motion/lib/spring';

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

8

-78.38%

Number of lines in readme file

56

3.7%

Number of low supply chain risk alerts

0

-100%

Worsened metrics

Total package byte prevSize

14832

-97.39%

Number of package files

7

-70.83%

Lines of code

340

-94.61%

Dependency changes

• + Added

  hoist-non-react-statics@3.3.2
  (transitive)

• + Added

  react-router@5.3.4
  (transitive)

• + Added

  react-router-dom@5.3.4
  (transitive)

• - Removed

  hoist-non-react-statics@2.5.5
  (transitive)

• - Removed

  invariant@2.2.4
  (transitive)

• - Removed

  react-router@4.3.1
  (transitive)

• - Removed

  react-router-dom@4.3.1
  (transitive)

• - Removed

  warning@4.0.3
  (transitive)

• Updated

  prop-types@^15.7.2

• Updated

  react-motion@^0.5.2