next-nprogress-emotion/dist/next-nprogress-emotion.esm.js

Theme aware NProgress component to use in Next.js apps using Emotion or ThemeUI.

import React, { useRef, useEffect } from 'react';
import NProgress from 'nprogress';
import Router from 'next/router';
import { Global } from '@emotion/react';

/**
 * Theme aware drop in NProgress component.
 */

var NProgressContainer = function NProgressContainer(_ref) {
  var color = _ref.color,
      spinner = _ref.spinner,
      showAfterMs = _ref.showAfterMs,
      options = _ref.options;
  var timer = useRef();

  var routeChangeStart = function routeChangeStart() {
    window.clearTimeout(timer.current);
    timer.current = window.setTimeout(NProgress.start, showAfterMs);
  };

  var routeChangeEnd = function routeChangeEnd() {
    window.clearTimeout(timer.current);
    NProgress.done();
  };

  useEffect(function () {
    if (options) {
      NProgress.configure(options);
    }

    Router.events.on('routeChangeStart', routeChangeStart);
    Router.events.on('routeChangeComplete', routeChangeEnd);
    Router.events.on('routeChangeError', routeChangeEnd);
    return function () {
      clearTimeout(timer.current);
      Router.events.off('routeChangeStart', routeChangeStart);
      Router.events.off('routeChangeComplete', routeChangeEnd);
      Router.events.off('routeChangeError', routeChangeEnd);
    };
  });
  return React.createElement(Global, {
    styles: function styles(theme) {
      var _theme$colors;

      // tries to find a corresponding color in the theme but falls back
      // to whatever color is supplied
      var themeColor = (theme == null ? void 0 : (_theme$colors = theme.colors) == null ? void 0 : _theme$colors[color]) || color;
      return {
        '#nprogress': {
          pointerEvents: 'none'
        },
        '#nprogress .bar': {
          background: themeColor,
          position: 'fixed',
          zIndex: 1031,
          top: 0,
          left: 0,
          width: '100%',
          height: '2px'
        },
        '#nprogress .peg': {
          display: 'block',
          position: 'absolute',
          right: '0px',
          width: '100px',
          height: '100%',
          boxShadow: "0 0 10px " + themeColor + ", 0 0 5px " + themeColor,
          opacity: 1,
          transform: 'rotate(3deg) translate(0px, -4px)'
        },
        '#nprogress .spinner': {
          display: spinner ? 'block' : 'none',
          position: 'fixed',
          zIndex: 1031,
          top: '15px',
          right: '15px'
        },
        '#nprogress .spinner-icon': {
          width: '18px',
          height: '18px',
          boxSizing: 'border-box',
          border: 'solid 2px transparent',
          borderTopColor: themeColor,
          borderLeftColor: themeColor,
          borderRadius: '50%',
          animation: 'nprogress-spinner 400ms linear infinite'
        },
        '.nprogress-custom-parent': {
          overflow: 'hidden',
          position: 'relative'
        },
        '.nprogress-custom-parent #nprogress .spinner': {
          position: 'absolute'
        },
        '.nprogress-custom-parent #nprogress .bar': {
          position: 'absolute'
        },
        '@keyframes nprogress-spinner': {
          '0%': {
            transform: 'rotate(0deg)'
          },
          '100%': {
            transform: 'rotate(360deg)'
          }
        }
      };
    }
  });
};

NProgressContainer.defaultProps = {
  color: 'primary',
  showAfterMs: 300,
  spinner: true
};

export default NProgressContainer;
//# sourceMappingURL=next-nprogress-emotion.esm.js.map