Merge pull request #171 from imagekit-developer/reactv19

React version 19 support

Author: imagekitio

.github/workflows/nodejs.yml

@@ -84,7 +84,7 @@ jobs:
         tar -cf build.tar --exclude=./build.tar .
     - name: Archive build details
       if: always()
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: e2e-archive
         path: build.tar

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "imagekitio-react",
-  "version": "4.2.0",
+  "version": "4.3.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",
@@ -67,8 +67,6 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "jest": "^26.5.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
     "react-test-renderer": "^16.13.1",
     "require-context.macro": "^1.2.2",
     "rollup": "^2.28.2",
@@ -84,7 +82,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"
   }
 }

package.json

@@ -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/IKImage/index.tsx

@@ -13,7 +13,7 @@ export type IKVideoState = {
 const IKVideo = (props: IKVideoProps & IKContextBaseProps) => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [state, setState] = useState<IKVideoState>({
-    currentUrl: '',
+    currentUrl: undefined,
     contextOptions: {}
   });
 

src/components/IKVideo/index.tsx

@@ -2,10 +2,10 @@ describe('ImageKit React SDK', () => {
   const APP_HOST = Cypress.env().APP_HOST;
 
   describe('Lazyload', () => {
-    it('should have empty src before reaching lazyload threshold', () => {
+    it('should not have 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', () => {
@@ -22,12 +22,10 @@ describe('ImageKit React SDK', () => {
   });
 
   describe('Lazyload with LQIP', () => {
-    it('should have lqip src before reaching threshold', () => {
+    it('should not 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', () => {