Support for react 19 added ImageKitProvider, ImageKitContext removed IKContext

package.json

@@ -1,6 +1,6 @@
 {
   "name": "imagekitio-react",
-  "version": "4.2.0",
+  "version": "5.0.0",
   "description": "React SDK for ImageKit.io which implements client-side upload and URL generation for use inside a react application.",
   "scripts": {
     "build:js": "rollup -c",
@@ -84,7 +84,7 @@
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   }
 }

src/components/IKImage/combinedProps.ts

@@ -1,6 +1,6 @@
 import { UrlOptionsPath, UrlOptionsSrc } from "imagekit-javascript/dist/src/interfaces/UrlOptions";
 import { InferProps } from "prop-types";
-import COMMON_PROPS from "../IKContext/props";
+import COMMON_PROPS from "../ImageKitProvider/props";
 import Props from "./props";
 
 const COMBINED_IMAGE_PROP_TYPES = {

src/components/IKImage/index.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import COMBINED_PROP_TYPES, { IKImageProps } from './combinedProps';
 import { fetchEffectiveConnection, getIKElementsUrl, getSrc } from '../../utils/Utility';
-import { ImageKitContext } from '../IKContext';
+import { ImageKitContext } from '../ImageKitProvider';
 import useImageKitComponent from '../ImageKitComponent';
 
 const IKImage = (props: IKImageProps) => {
@@ -91,7 +91,7 @@ const IKImage = (props: IKImageProps) => {
 
   return <img
     alt={props.alt || ""}
-    src={currentUrl ? currentUrl : ''}
+    src={currentUrl ? currentUrl : undefined}
     ref={imageRef}
     {...restProps}
   />;

src/components/IKUpload/index.tsx

@@ -1,14 +1,14 @@
 import React, { forwardRef, useContext, useEffect, useState } from 'react';
-import { IKContextBaseProps } from "../IKContext/props";
+import { ImageKitProviderBaseProps } from "../ImageKitProvider/props";
 import { IKUploadProps, OverrideValues } from "./props";
-import { ImageKitContext } from '../IKContext';
+import { ImageKitContext } from '../ImageKitProvider';
 import useImageKitComponent from '../ImageKitComponent';
 
 type IKUploadState = {
   xhr?: XMLHttpRequest;
 };
 
-const IKUpload = forwardRef<HTMLInputElement, IKUploadProps & IKContextBaseProps>((props, ref) => {
+const IKUpload = forwardRef<HTMLInputElement, IKUploadProps & ImageKitProviderBaseProps>((props, ref) => {
   const [state, setState] = useState<IKUploadState>({});
   const contextOptions = useContext(ImageKitContext);
   const { getIKClient } = useImageKitComponent({ ...props });

src/components/IKVideo/combinedProps.ts

@@ -1,6 +1,6 @@
 import { UrlOptionsPath, UrlOptionsSrc } from 'imagekit-javascript/dist/src/interfaces/UrlOptions';
 import { InferProps } from 'prop-types';
-import COMMON_PROPS from "../IKContext/props";
+import COMMON_PROPS from "../ImageKitProvider/props";
 import Props from './props';
 
 const COMBINED_IMAGE_PROP_TYPES = {

src/components/IKVideo/index.tsx

@@ -1,19 +1,19 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { IKContextBaseProps, IKContextExtractedProps } from "../IKContext/props";
+import { ImageKitProviderBaseProps, ImageKitProviderExtractedProps } from "../ImageKitProvider/props";
 import COMBINED_PROP_TYPES, { IKVideoProps } from './combinedProps';
 import { getSrc } from '../../utils/Utility';
 import useImageKitComponent from '../ImageKitComponent';
-import { ImageKitContext } from '../IKContext';
+import { ImageKitContext } from '../ImageKitProvider';
 
 export type IKVideoState = {
   currentUrl?: string;
-  contextOptions: IKContextExtractedProps;
+  contextOptions: ImageKitProviderExtractedProps;
 };
 
-const IKVideo = (props: IKVideoProps & IKContextBaseProps) => {
+const IKVideo = (props: IKVideoProps & ImageKitProviderBaseProps) => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [state, setState] = useState<IKVideoState>({
-    currentUrl: '',
+    currentUrl: undefined,
     contextOptions: {}
   });
 

src/components/ImageKitComponent/index.ts

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import ImageKit from 'imagekit-javascript';
-import { IKContextBaseProps } from '../IKContext/props';
-import { ImageKitContext } from '../IKContext';
+import { ImageKitProviderBaseProps } from '../ImageKitProvider/props';
+import { ImageKitContext } from '../ImageKitProvider';
 
- const useImageKitComponent= <T = void>(props: React.PropsWithChildren & IKContextBaseProps & T):{getIKClient:() => ImageKit} => {
+ const useImageKitComponent= <T = void>(props: React.PropsWithChildren & ImageKitProviderBaseProps & T):{getIKClient:() => ImageKit} => {
   const contextOptions = useContext(ImageKitContext);
 
   const getIKClient = (): ImageKit => {

src/components/IKContext/index.tsx → src/components/ImageKitProvider/index.tsx

@@ -2,32 +2,32 @@
 import React, { createContext } from 'react';
 import { InferProps } from 'prop-types';
 import ImageKit from 'imagekit-javascript';
-import { IKContextProps, IKContextExtractedProps } from "./props";
+import { ImageKitProviderProps, ImageKitProviderExtractedProps } from "./props";
 
 // Create the context
-export const ImageKitContext = createContext<IKContextExtractedProps>({});
+export const ImageKitContext = createContext<ImageKitProviderExtractedProps>({});
 
 /**
- * Provides a container for ImageKit components. Any option set in IKContext will be passed to the children.
+ * Provides a container for ImageKit components. Any option set in ImageKitProvider will be passed to the children.
  *
  * @example
- *<IKContext  publicKey="<public key>" urlEndpoint="url link">
+ *<ImageKitProvider  publicKey="<public key>" urlEndpoint="url link">
  *    <!-- other tags -->
  *    <Image src={link}/>
- *</IKContext>
+ *</ImageKitProvider>
  */
-const IKContext = (props: React.PropsWithChildren<IKContextProps>) => {
+const ImageKitProvider = (props: React.PropsWithChildren<ImageKitProviderProps>) => {
 
-  const extractContextOptions = (mergedOptions: InferProps<IKContextExtractedProps>) => {
-    var result: IKContextExtractedProps = {};
+  const extractContextOptions = (mergedOptions: InferProps<ImageKitProviderExtractedProps>) => {
+    var result: ImageKitProviderExtractedProps = {};
 
-    const propKeys = Object.keys(IKContextExtractedProps);
+    const propKeys = Object.keys(ImageKitProviderExtractedProps);
 
     for (var i = 0; i < propKeys.length; i++) {
       var key = propKeys[i];
-      const value = mergedOptions[key as keyof IKContextExtractedProps];
+      const value = mergedOptions[key as keyof ImageKitProviderExtractedProps];
       if (value) {
-        result[key as keyof IKContextExtractedProps] = value;
+        result[key as keyof ImageKitProviderExtractedProps] = value;
       }
     }
 
@@ -55,4 +55,4 @@ const IKContext = (props: React.PropsWithChildren<IKContextProps>) => {
   );
 }
 
-export default IKContext;
+export default ImageKitProvider;

src/components/IKContext/props.ts → src/components/ImageKitProvider/props.ts

@@ -7,23 +7,23 @@ const Props = {
   authenticator: PropTypes.func
 };
 
-export const IKContextProps = {
+export const ImageKitProviderProps = {
   ...Props,
   transformationPosition: PropTypes.oneOf(['path', 'query']),
 };
 
-export const IKContextExtractedProps = {
-  ...IKContextProps,
+export const ImageKitProviderExtractedProps = {
+  ...ImageKitProviderProps,
   ikClient: PropTypes.instanceOf(ImageKit),
 };
 
-export type IKContextProps = InferProps<typeof IKContextProps> & {
+export type ImageKitProviderProps = InferProps<typeof ImageKitProviderProps> & {
   urlEndpoint?: string;
 };
 
-export type IKContextBaseProps = InferProps<typeof Props>;
+export type ImageKitProviderBaseProps = InferProps<typeof Props>;
 
-export type IKContextExtractedProps = InferProps<typeof IKContextExtractedProps> & {
+export type ImageKitProviderExtractedProps = InferProps<typeof ImageKitProviderExtractedProps> & {
   urlEndpoint?: string;
 };
 

src/index.ts

@@ -1,13 +1,14 @@
 import ImageKit from 'imagekit-javascript';
-import IKContext from './components/IKContext';
+import ImageKitProvider, { ImageKitContext } from "./components/ImageKitProvider";
 import IKImage from './components/IKImage';
 import IKVideo from  './components/IKVideo';
 import IKUpload from './components/IKUpload';
 
 export {
-    IKContext,
+    ImageKitProvider,
     IKImage,
     IKUpload,
     IKVideo,
-    ImageKit as IKCore
+    ImageKit as IKCore,
+    ImageKitContext
 };

src/utils/Utility.ts

@@ -1,6 +1,6 @@
 import ImageKit from "imagekit-javascript";
 import { TransformationPosition, UrlOptions } from "imagekit-javascript/dist/src/interfaces";
-import { IKContextBaseProps, IKContextExtractedProps } from "../components/IKContext/props";
+import { ImageKitProviderBaseProps, ImageKitProviderExtractedProps } from "../components/ImageKitProvider/props";
 import { IKImageProps, IKImageBaseProps } from "../components/IKImage/combinedProps";
 import { IKVideoBaseProps } from "../components/IKVideo/combinedProps";
 
@@ -11,7 +11,7 @@ export type IKImageState = {
   lqipSrc?: string;
   originalSrcLoaded: boolean;
   intersected: boolean;
-  contextOptions: IKContextExtractedProps;
+  contextOptions: ImageKitProviderExtractedProps;
   observe?: IntersectionObserver;
   initialzeState: boolean
 }
@@ -35,8 +35,8 @@ export const areObjectsDifferent = <T>(prevProps: T, newProps: T, propsAffecting
 }
 type GetSrcReturnType = {originalSrc: string; lqipSrc?: string;};
 
-export const getSrc = ({ urlEndpoint, lqip, src, path, transformation, transformationPosition, queryParameters }: IKImageBaseProps & IKVideoBaseProps & IKContextBaseProps,
-  ikClient: ImageKit, contextOptions: IKContextExtractedProps): GetSrcReturnType  => {
+export const getSrc = ({ urlEndpoint, lqip, src, path, transformation, transformationPosition, queryParameters }: IKImageBaseProps & IKVideoBaseProps & ImageKitProviderBaseProps,
+  ikClient: ImageKit, contextOptions: ImageKitProviderExtractedProps): GetSrcReturnType  => {
 
   let options: UrlOptions;
   if (src) {

tests/cypress/integration/IKImage.cy.js

@@ -5,7 +5,7 @@ describe('ImageKit React SDK', () => {
     it('should have empty src before reaching lazyload threshold', () => {
       cy.visit(APP_HOST);
 
-      cy.get('.lazyload').should('have.attr', 'src').and('equal', '');
+      cy.get(".lazyload").should("not.have.attr", "src");
     });
 
     it('should have actual src after reaching lazyload threshold', () => {
@@ -25,9 +25,7 @@ describe('ImageKit React SDK', () => {
     it('should have lqip src before reaching threshold', () => {
       cy.visit(APP_HOST);
 
-      cy.get('.lazyload-lqip')
-        .should('have.attr', 'src')
-        .and('include', '');
+      cy.get(".lazyload-lqip").should("not.have.attr", "src");
     });
 
     it('should have actual src after reaching element', () => {
@@ -67,7 +65,7 @@ describe('ImageKit React SDK', () => {
   });
 
   describe('State update check', () => {
-    it('should update image src with chained transformation outside IKContext dynamically', () => {
+    it('should update image src with chained transformation outside ImageKitProvider dynamically', () => {
       cy.visit(APP_HOST);
 
       cy.get('.img-transformation-direct').scrollIntoView();
@@ -85,7 +83,7 @@ describe('ImageKit React SDK', () => {
         .should('have.attr', 'src')
         .and('include', 'tr:h-200,w-600,r-max:h-200,w-200,rt-180:ot-TEST,oy-50,ox-100,otc-10C0F0/default-image.jpg');
     });
-    it('should update image src within IKContext when button is clicked', () => {
+    it('should update image src within ImageKitProvider when button is clicked', () => {
       cy.visit(APP_HOST);
 
       cy.get('.img-transformation').scrollIntoView();