React v16 declared as a dependency may cause issues when upgrading to React v17

[Alexander Kachkaev]

Typically, React libraries state react as a peer dependency because this helps avoid duplicate React instances. This is getting more topical with a recent release of React 17.

It'd be great if react-svg-spinner no longer included react in package.json → dependencies and possibly avoided using prop-types too. In 2020, instead of using this runtime check, we can rely on TypeScript.

Generally speaking, the library could be rewritten in TypeScript and I'm happy to help with this transformation if there is a chance it can be released soon.

Meanwhile, to ease my migration to React 17, I replaced react-svg-spinner with this local Spinner.tsx file:

import React from "react";

// Inspired by: https://github.com/chantastic/react-svg-spinner/blob/3911c525f37e41307f25253da864fe93ca74eebf/index.js

export type SpinnerSpeed = "fast" | "slow" | undefined;

const speedSwitch = (speed: SpinnerSpeed) => {
  if (speed === "fast") return 600;
  if (speed === "slow") return 900;
  return 750;
};

export const Spinner: React.FunctionComponent<{
  color?: string;
  speed?: SpinnerSpeed;
  thickness?: number;
  gap?: number;
  size?: string;
}> = ({
  color = "rgba(0,0,0,0.4)",
  speed,
  gap = 4,
  thickness = 4,
  size = "1em",
  ...rest
}) => (
  <svg
    height={size}
    width={size}
    {...rest}
    style={{ animationDuration: `${speedSwitch(speed)}ms` }}
    className="__react-svg-spinner_circle"
    role="img"
    viewBox="0 0 32 32"
  >
    <style
      dangerouslySetInnerHTML={{
        __html: `
      .__react-svg-spinner_circle{
          transition-property: transform;
          animation-name: __react-svg-spinner_infinite-spin;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
      }
      @keyframes __react-svg-spinner_infinite-spin {
          from {transform: rotate(0deg)}
          to {transform: rotate(360deg)}
      }
    `,
      }}
    />
    <circle
      role="presentation"
      cx={16}
      cy={16}
      r={14 - thickness / 2}
      stroke={color}
      fill="none"
      strokeWidth={thickness}
      strokeDasharray={Math.PI * 2 * (11 - gap)}
      strokeLinecap="round"
    />
  </svg>
);

Happy to bring it back to the lib via a PR 🙂