From a538a311e4f27b0331c4a641c76c992e69ae1310 Mon Sep 17 00:00:00 2001 From: ANKUR DWIVEDI Date: Thu, 16 Jan 2025 02:04:57 +0530 Subject: [PATCH 1/3] support for react 19 --- package.json | 4 ++-- src/components/IKImage/index.tsx | 2 +- src/components/IKVideo/index.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index a2acb1e..9f4a1f8 100755 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/src/components/IKImage/index.tsx b/src/components/IKImage/index.tsx index 769d2ca..718f582 100755 --- a/src/components/IKImage/index.tsx +++ b/src/components/IKImage/index.tsx @@ -91,7 +91,7 @@ const IKImage = (props: IKImageProps) => { return {props.alt; diff --git a/src/components/IKVideo/index.tsx b/src/components/IKVideo/index.tsx index 5c856ae..44dc2d9 100644 --- a/src/components/IKVideo/index.tsx +++ b/src/components/IKVideo/index.tsx @@ -13,7 +13,7 @@ export type IKVideoState = { const IKVideo = (props: IKVideoProps & IKContextBaseProps) => { const videoRef = useRef(null); const [state, setState] = useState({ - currentUrl: '', + currentUrl: undefined, contextOptions: {} }); From 390da91ce0e9f4c8b71933d092072618650d0c5b Mon Sep 17 00:00:00 2001 From: ANKUR DWIVEDI Date: Thu, 16 Jan 2025 02:15:04 +0530 Subject: [PATCH 2/3] update e2e test --- tests/cypress/integration/IKImage.cy.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/tests/cypress/integration/IKImage.cy.js b/tests/cypress/integration/IKImage.cy.js index f0d14df..993de28 100644 --- a/tests/cypress/integration/IKImage.cy.js +++ b/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', () => { From a0d7a3a779c7ced6d08a6e269445191b9f9bd137 Mon Sep 17 00:00:00 2001 From: ANKUR DWIVEDI Date: Thu, 16 Jan 2025 05:39:16 +0530 Subject: [PATCH 3/3] replaced IKContext with ImageKitProvider --- README.md | 87 ++++++++------ package.json | 2 +- src/components/IKImage/combinedProps.ts | 2 +- src/components/IKImage/index.tsx | 2 +- src/components/IKUpload/index.tsx | 6 +- src/components/IKVideo/combinedProps.ts | 2 +- src/components/IKVideo/index.tsx | 8 +- src/components/ImageKitComponent/index.ts | 6 +- .../{IKContext => ImageKitProvider}/index.tsx | 24 ++-- .../{IKContext => ImageKitProvider}/props.ts | 12 +- src/index.ts | 7 +- src/utils/Utility.ts | 8 +- tests/cypress/integration/IKImage.cy.js | 4 +- tests/jest/IKContext.test.jsx | 56 ++++----- tests/jest/IKUpload.test.jsx | 112 +++++++++--------- tests/test-app/src/App.js | 12 +- 16 files changed, 185 insertions(+), 165 deletions(-) rename src/components/{IKContext => ImageKitProvider}/index.tsx (54%) rename src/components/{IKContext => ImageKitProvider}/props.ts (53%) diff --git a/README.md b/README.md index f356415..d00024f 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,12 @@ ImageKit is a complete media storage, optimization, and transformation solution ## Breaking changes +### Upgrading from 4.x to 5.x version + +1. `IKContext` has been removed. + +* In version 5.0.0, we have replaced `IKContext` with [`ImageKitProvider`](#ImageKitProvider) and introduced a new component called [`ImageKitContext`](#ImageKitContext). + ### Upgrading from 3.x to 4.x version 1. Overlay syntax update @@ -81,18 +87,18 @@ yarn add imagekitio-react Import components in your code: ```js -import { IKImage, IKVideo, IKContext, IKUpload } from 'imagekitio-react' +import { IKImage, IKVideo, ImageKitProvider, IKUpload, ImageKitContext } from 'imagekitio-react' ``` ### Quick examples #### Image & video rendering and transformations ```js - + // Render an image using a relative path - https://ik.imagekit.io/your_imagekit_id/default-image.jpg - // Overriding urlEndpoint defined in parent IkContext - https://www.custom-domain.com/default-image.jpg + // Overriding urlEndpoint defined in parent ImageKitProvider - https://www.custom-domain.com/default-image.jpg // Render an image using an absolute URL - https://www1.custom-domain.com/default-image.jpg?tr=w-100 @@ -119,12 +125,12 @@ import { IKImage, IKVideo, IKContext, IKUpload } from 'imagekitio-react' transformation={[{ height: 200, width: 200, q: 50 }]} controls={true} /> - + ``` #### Image lazy loading and low-quality placeholder ```js - + // Lazy loading image - + ``` #### File upload example ```js -// Ensure you pass publicKey, urlEndpoint, and authenticator function to the parent IKContext component or to the IKUpload component directly. -Promise} @@ -207,7 +213,7 @@ import { IKImage, IKVideo, IKContext, IKUpload } from 'imagekitio-react' }} checks={`"file.size" < "1mb"`} // To run server side checks before uploading files. Notice the quotes around file.size and 1mb. /> - + ``` ## Demo application @@ -216,26 +222,27 @@ import { IKImage, IKVideo, IKContext, IKUpload } from 'imagekitio-react' ## Components -The library includes 5 Components: +The library includes 6 Components: -* [`IKContext`](#IKContext) for defining options like `urlEndpoint`, `publicKey` or `authenticator` to all children elements. This component does not render anything. +* [`ImageKitProvider`](#ImageKitProvider) for defining options like `urlEndpoint`, `publicKey` or `authenticator` to all children elements. This component does not render anything. * `IKImage` for [image resizing](#image-resizing). This renders a `` tag. * `IKVideo` for [video resizing](#video-resizing). This renders a `