Fix issues with crossorigin

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 4.0.4
+
+- adds support for crossOrigin prop. If both crossorigin and crossOrigin present, uses the one defined last
+
 # 4.0.3
 
 - Update peerDependencies in package.json

Img.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useImageProps } from './useImage';
+export declare type ImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'> & Omit<useImageProps, 'srcList'> & {
+    src: useImageProps['srcList'];
+    loader?: JSX.Element | null;
+    unloader?: JSX.Element | null;
+    decode?: boolean;
+    crossorigin?: string;
+    container?: (children: React.ReactNode) => JSX.Element;
+    loaderContainer?: (children: React.ReactNode) => JSX.Element;
+    unloaderContainer?: (children: React.ReactNode) => JSX.Element;
+};
+export default function Img({ decode, src: srcList, loader, unloader, container, loaderContainer, unloaderContainer, imgPromise, useSuspense, ...imgProps }: ImgProps): JSX.Element | null;

README.md

@@ -153,11 +153,11 @@ const myComponent = () => (
 
 ### Loading images with a CORS policy
 
-When loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:
+When loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossOrigin` attribute. For example:
 
 ```js
 const myComponent = () => (
-  <Img src={'https://www.example.com/foo.jpg'} crossorigin="anonymous" />
+  <Img src={'https://www.example.com/foo.jpg'} crossOrigin="anonymous" />
 )
 ```
 

app.d.ts

@@ -0,0 +1 @@
+export {};

imagePromiseFactory.d.ts

@@ -0,0 +1,5 @@
+declare const _default: ({ decode, crossOrigin }: {
+    decode?: boolean | undefined;
+    crossOrigin?: string | undefined;
+}) => (src: any) => Promise<void>;
+export default _default;

index.d.ts

@@ -0,0 +1,3 @@
+import Img, { ImgProps } from './Img';
+import useImage, { useImageProps } from './useImage';
+export { Img, useImage, ImgProps, useImageProps };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-image",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support",
   "scripts": {
     "build": "npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc",

src/Img.tsx

@@ -31,12 +31,28 @@ export default function Img({
   loaderContainer = passthroughContainer,
   unloaderContainer = passthroughContainer,
   imgPromise,
-  crossorigin,
   useSuspense = false,
   ...imgProps // anything else will be passed to the <img> element
 }: ImgProps): JSX.Element | null {
+  const {crossorigin, crossOrigin} = imgProps ?? {}
+
+  const crossOriginToUse = (() => {
+    if (crossorigin !== undefined && crossOrigin !== undefined) {
+      const imgPropsKeys = Object.keys(imgProps)
+      const crossoriginIndex = imgPropsKeys.findIndex(
+        (x) => x === 'crossorigin'
+      )
+      const crossOriginIndex = imgPropsKeys.findIndex(
+        (x) => x === 'crossOrigin'
+      )
+      return crossOriginIndex > crossoriginIndex ? crossOrigin : crossorigin
+    }
+    return crossOrigin ?? crossorigin
+  })()
+
   imgPromise =
-    imgPromise || imagePromiseFactory({decode, crossOrigin: crossorigin})
+    imgPromise || imagePromiseFactory({decode, crossOrigin: crossOriginToUse})
+
   const {src, isLoading} = useImage({
     srcList,
     imgPromise,

useImage.d.ts

@@ -0,0 +1,10 @@
+export declare type useImageProps = {
+    srcList: string | string[];
+    imgPromise?: (...args: any[]) => Promise<void>;
+    useSuspense?: boolean;
+};
+export default function useImage({ srcList, imgPromise, useSuspense, }: useImageProps): {
+    src: string | undefined;
+    isLoading: boolean;
+    error: any;
+};