Minor fixes

src/index.tsx

@@ -243,7 +243,10 @@ function ReactInlineSVG(props: Props) {
   }
 
   if (element) {
-    return cloneElement(element as ReactElement, { ref: innerRef, ...elementProps });
+    return cloneElement(element as ReactElement<any>, {
+      ref: innerRef,
+      ...elementProps,
+    });
   }
 
   if (([STATUS.UNSUPPORTED, STATUS.FAILED] as Status[]).includes(status)) {

src/modules/cache.ts

@@ -1,8 +1,8 @@
-import { canUseDOM, request, sleep } from './helpers';
-
 import { CACHE_MAX_RETRIES, CACHE_NAME, STATUS } from '../config';
 import { StorageItem } from '../types';
 
+import { canUseDOM, request, sleep } from './helpers';
+
 export default class CacheStore {
   private cacheApi: Cache | undefined;
   private readonly cacheStore: Map<string, StorageItem>;

src/modules/helpers.ts

@@ -1,13 +1,51 @@
 import type { PlainObject } from '../types';
 
+function randomCharacter(character: string) {
+  return character[Math.floor(Math.random() * character.length)];
+}
+
 export function canUseDOM(): boolean {
-  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+  return !!window?.document?.createElement;
 }
 
 export function isSupportedEnvironment(): boolean {
   return supportsInlineSVG() && typeof window !== 'undefined' && window !== null;
 }
 
+/**
+ *  Remove properties from an object
+ */
+export function omit<T extends PlainObject, K extends keyof T>(
+  input: T,
+  ...filter: K[]
+): Omit<T, K> {
+  const output: any = {};
+
+  for (const key in input) {
+    if ({}.hasOwnProperty.call(input, key)) {
+      if (!filter.includes(key as unknown as K)) {
+        output[key] = input[key];
+      }
+    }
+  }
+
+  return output as Omit<T, K>;
+}
+
+export function randomString(length: number): string {
+  const letters = 'abcdefghijklmnopqrstuvwxyz';
+  const numbers = '1234567890';
+  const charset = `${letters}${letters.toUpperCase()}${numbers}`;
+
+  let R = '';
+
+  for (let index = 0; index < length; index++) {
+    R += randomCharacter(charset);
+  }
+
+  return R;
+}
+
 export async function request(url: string, options?: RequestInit) {
   const response = await fetch(url, options);
   const contentType = response.headers.get('content-type');
@@ -43,41 +81,3 @@ export function supportsInlineSVG(): boolean {
 
   return !!svg && svg.namespaceURI === 'http://www.w3.org/2000/svg';
 }
-
-function randomCharacter(character: string) {
-  return character[Math.floor(Math.random() * character.length)];
-}
-
-export function randomString(length: number): string {
-  const letters = 'abcdefghijklmnopqrstuvwxyz';
-  const numbers = '1234567890';
-  const charset = `${letters}${letters.toUpperCase()}${numbers}`;
-
-  let R = '';
-
-  for (let index = 0; index < length; index++) {
-    R += randomCharacter(charset);
-  }
-
-  return R;
-}
-
-/**
- *  Remove properties from an object
- */
-export function omit<T extends PlainObject, K extends keyof T>(
-  input: T,
-  ...filter: K[]
-): Omit<T, K> {
-  const output: any = {};
-
-  for (const key in input) {
-    if ({}.hasOwnProperty.call(input, key)) {
-      if (!filter.includes(key as unknown as K)) {
-        output[key] = input[key];
-      }
-    }
-  }
-
-  return output as Omit<T, K>;
-}

src/modules/hooks.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 export function usePrevious<T>(state: T): T | undefined {
-  const ref = useRef<T>();
+  const ref = useRef<T>(undefined);
 
   useEffect(() => {
     ref.current = state;

src/types.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { ReactNode, RefObject, SVGProps } from 'react';
 
 import { STATUS } from './config';
 
@@ -8,14 +8,14 @@ export type PlainObject<T = unknown> = Record<string, T>;
 export type PreProcessorCallback = (code: string) => string;
 
 export type Props = Simplify<
-  Omit<React.SVGProps<SVGElement>, 'onLoad' | 'onError' | 'ref'> & {
+  Omit<SVGProps<SVGElement>, 'onLoad' | 'onError' | 'ref'> & {
     baseURL?: string;
     cacheRequests?: boolean;
-    children?: React.ReactNode;
+    children?: ReactNode;
     description?: string;
     fetchOptions?: RequestInit;
-    innerRef?: React.Ref<SVGElement>;
-    loader?: React.ReactNode;
+    innerRef?: RefObject<SVGElement | null>;
+    loader?: ReactNode;
     onError?: ErrorCallback;
     onLoad?: LoadCallback;
     preProcessor?: PreProcessorCallback;
@@ -26,12 +26,9 @@ export type Props = Simplify<
   }
 >;
 
-export interface State {
-  content: string;
-  element: React.ReactNode;
-  isCached: boolean;
-  status: Status;
-}
+export type Simplify<T> = { [KeyType in keyof T]: T[KeyType] } & {};
+
+export type Status = (typeof STATUS)[keyof typeof STATUS];
 
 export interface FetchError extends Error {
   code: string;
@@ -40,9 +37,12 @@ export interface FetchError extends Error {
   type: string;
 }
 
-export type Simplify<T> = { [KeyType in keyof T]: T[KeyType] } & {};
-
-export type Status = (typeof STATUS)[keyof typeof STATUS];
+export interface State {
+  content: string;
+  element: ReactNode;
+  isCached: boolean;
+  status: Status;
+}
 
 export interface StorageItem {
   content: string;