diff --git a/.babelrc b/.babelrc deleted file mode 100644 index f9ad302..0000000 --- a/.babelrc +++ /dev/null @@ -1,10 +0,0 @@ -{ - "presets": [ - "@babel/preset-react", - "@babel/preset-env", - "@babel/preset-typescript" - ], - "plugins": [ - "transform-class-properties" - ] -} \ No newline at end of file diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index f6f653e..788d982 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -8,7 +8,7 @@ jobs: strategy: matrix: - node-version: [12.x] + node-version: [20.x] steps: - uses: actions/checkout@v1 @@ -18,74 +18,17 @@ jobs: with: node-version: ${{ matrix.node-version }} - - name: Setup module and run unit tests - run: | - npm install - # npm run test:ci - env: - CI: true - REACT_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }} - REACT_APP_PRIVATE_KEY: ${{ secrets.ik_private_key }} - REACT_APP_URL_ENDPOINT: ${{ secrets.ik_url_endopint }} - - e2e: - runs-on: ubuntu-latest - - strategy: - matrix: - node-version: [12.x] - - steps: - - uses: actions/checkout@v1 - - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 - with: - node-version: ${{ matrix.node-version }} - - - name: Setup module + - name: Build and Test run: | npm install npm run build npm pack - - name: build test-app - run: | - cd tests/test-app - echo REACT_APP_URL_ENDPOINT = ${{ secrets.ik_url_endopint }} > .env; - echo REACT_APP_PUBLIC_KEY = ${{ secrets.ik_public_key }} >> .env; - echo REACT_APP_PRIVATE_KEY = ${{ secrets.ik_private_key }} >> .env; - echo REACT_APP_AUTHENTICATION_ENDPOINT = 'http://localhost:4001/auth' >> .env; - npm install && npm install ../../imagekitio*.tgz --force && npm run build - cd server - echo PRIVATE_KEY = ${{ secrets.ik_private_key }} >> .env; + cd test-app npm install + npm install ../imagekit-react-*.tgz --no-save + npx playwright install --with-deps + npm run test:e2e env: CI: true - REACT_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }} - REACT_APP_PRIVATE_KEY: ${{ secrets.ik_private_key }} - REACT_APP_URL_ENDPOINT: ${{ secrets.ik_url_endopint }} - - name: Run E2E tests - uses: cypress-io/github-action@v4 - with: - start: npm run serve:test-app - wait-on: 'http://localhost:4000, http://localhost:4001' - env: - DEBUG: 'cypress:server:browsers:electron' - CI: true - REACT_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }} - REACT_APP_PRIVATE_KEY: ${{ secrets.ik_private_key }} - REACT_APP_URL_ENDPOINT: ${{ secrets.ik_url_endopint }} - REACT_APP_AUTHENTICATION_ENDPOINT: 'http://localhost:4001/auth' - - - name: tar workspace - if: always() - run: | - tar -cf build.tar --exclude=./build.tar . - - name: Archive build details - if: always() - uses: actions/upload-artifact@v4 - with: - name: e2e-archive - path: build.tar - retention-days: 1 + \ No newline at end of file diff --git a/.github/workflows/npmpublish.yml b/.github/workflows/npmpublish.yml index 3d103e9..0d5144a 100644 --- a/.github/workflows/npmpublish.yml +++ b/.github/workflows/npmpublish.yml @@ -10,7 +10,7 @@ jobs: strategy: matrix: - node-version: [12.x] + node-version: [20.x] steps: - uses: actions/checkout@v1 @@ -18,16 +18,19 @@ jobs: uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - - name: npm install, build, and test + - name: Build and Test run: | - npm i - # npm run test:ci + npm install npm run build + npm pack + cd test-app + npm install + npm install ../imagekit-react-*.tgz --no-save + npx playwright install --with-deps + npm run test:e2e env: CI: true - REACT_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }} - REACT_APP_PRIVATE_KEY: ${{ secrets.ik_private_key }} - REACT_APP_URL_ENDPOINT: ${{ secrets.ik_url_endopint }} + publish: needs: build @@ -36,14 +39,24 @@ jobs: - uses: actions/checkout@v1 - uses: actions/setup-node@v1 with: - node-version: 12 + node-version: 20 registry-url: https://registry.npmjs.org/ - - name: npm publish + - name: NPM Publish run: | - npm i + npm install npm run build npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN - npm publish + # print the NPM user name for validation + npm whoami + VERSION=$(node -p "require('./package.json').version" ) + # Only publish stable versions to the latest tag + if [[ "$VERSION" =~ ^[^-]+$ ]]; then + NPM_TAG="latest" + else + NPM_TAG="beta" + fi + echo "Publishing $VERSION with $NPM_TAG tag." + npm publish --tag $NPM_TAG --access public env: NODE_AUTH_TOKEN: ${{secrets.npm_token}} CI: true diff --git a/.gitignore b/.gitignore index 5ebca89..b811930 100755 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ lib dist coverage .DS_Store +*.tgz diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..483a9c4 --- /dev/null +++ b/.npmignore @@ -0,0 +1 @@ +package-lock.json \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..fad48a1 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,23 @@ +## 5.0.0 + +This is a major release that includes breaking changes. Please refer to the [official documentation](https://imagekit.io/docs/integration/react) for up-to-date usage instructions. + +## 4.3.0 + +- Added support for React version 19 by [@ankur-dwivedi](https://github.com/ankur-dwivedi) in [#171](https://github.com/imagekit-developer/imagekit-react/pull/171) + +**Full Changelog**: [v4.2.0...v4.3.0](https://github.com/imagekit-developer/imagekit-react/compare/4.2.0...4.3.0) + +## 4.2.0 + +- Added `checks` parameter by [@imagekitio](https://github.com/imagekitio) in [#161](https://github.com/imagekit-developer/imagekit-react/pull/161) + +**Full Changelog**: [v4.1.0...v4.2.0](https://github.com/imagekit-developer/imagekit-react/compare/4.1.0...4.2.0) + +## 4.1.0 + +- Release details not specified. + +**Full Changelog**: [v4.0.0...v4.1.0](https://github.com/imagekit-developer/imagekit-react/compare/4.0.0...4.1.0) + +For the complete list of releases and changes, visit the [GitHub Releases Page](https://github.com/imagekit-developer/imagekit-react/releases). diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index ee55978..0000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,28 +0,0 @@ -## Contributing -When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. - -## Building package - -Execute following command from the root folder to build the library. This will create bundles in `dist` folder. - -```sh -npm install # run for first time -npm run build -``` - -## Running test cases - -The designated directory for tests is `/tests/jest` folder. All tests will be run against the assertion present in the `/tests/jest/__snapshot__` folder. To create this file you need to run the following command once. To rerun tests after making changes press`u` while the test environment is running. - -Execute following command from the root folder to start testing. -```sh -npm run test -``` - -## Running the test frontend React app - -Please refer to the the test app `README.md` for details. - -## Running the test backend server - -Please refer to the the test app `README.md` for details. diff --git a/README.md b/README.md index d67616f..4430896 100644 --- a/README.md +++ b/README.md @@ -2,776 +2,32 @@ # ImageKit.io React SDK -> Note for Next.js users: If you are building a Next.js application, see our separate [ImageKit Next.js SDK](https://github.com/imagekit-developer/imagekit-next). Refer to the official quickstart guide at for easy integration. - -[![Node CI](https://github.com/imagekit-developer/imagekit-react/workflows/Node%20CI/badge.svg)](https://github.com/imagekit-developer/imagekit-react/) -[![npm version](https://img.shields.io/npm/v/imagekitio-react)](https://www.npmjs.com/package/imagekitio-react) -[![codecov](https://codecov.io/gh/imagekit-developer/imagekit-react/branch/master/graph/badge.svg)](https://codecov.io/gh/imagekit-developer/imagekit-react) +![Node CI](https://github.com/imagekit-developer/imagekit-react/workflows/Node%20CI/badge.svg) +[![npm version](https://img.shields.io/npm/v/@imagekit/react)](https://www.npmjs.com/package/@imagekit/react) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Twitter Follow](https://img.shields.io/twitter/follow/imagekitio?label=Follow&style=social)](https://twitter.com/ImagekitIo) -ImageKit React SDK allows you to resize, optimize, deliver, and upload images and videos in your React application. - -ImageKit is a complete media storage, optimization, and transformation solution that comes with an image and video CDN. It can be integrated with your existing infrastructure - storage like AWS S3, web servers, your CDN, and custom domain names, allowing you to deliver optimized images in minutes with minimal code changes. - -## Breaking changes - -### Upgrading from 3.x to 4.x version - -1. Overlay syntax update - -* In version 4.0.0, we've removed the old overlay syntax parameters for transformations, such as `oi`, `ot`, `obg`, and [more](https://docs.imagekit.io/features/image-transformations/overlay). These parameters are deprecated and will start returning errors when used in URLs. Please migrate to the new layers syntax that supports overlay nesting, provides better positional control, and allows more transformations at the layer level. You can start with [examples](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#examples) to learn quickly. -* You can migrate to the new layers syntax using the `raw` transformation parameter. - -2. IKContext props update - -* `IKContext` has been updated to only include `urlEndpoint`, `publicKey`, `authenticator`, and `transformationPosition` props, removing others that were more specific to image, video, and upload, and not typically set globally. - -### Upgrading from 2.x to 3.x version -3.x version has breaking changes as listed below. -* In version 3.0.0, we have deprecated the use of the `authenticationEndpoint` parameter. Instead, the SDK now introduces a new parameter named `authenticator`. This parameter expects an asynchronous function that resolves with an object containing the necessary security parameters i.e `signature`, `token`, and `expire`. -* Now `ref` needs to be passed instead of `inputRef` in the IKUpload component - -An example implementation for `authenticator` using `Fetch API`. - -``` javascript +## Introduction - const authenticator = async () => { - try { - - // You can also pass headers and validate the request source in the backend, or you can use headers for any other use case. - const headers = { - 'CustomHeader': 'CustomValue' - }; - - const response = await fetch('server_endpoint', { - headers - }); - - if (!response.ok) { - const errorText = await response.text(); - throw new Error(`Request failed with status ${response.status}: ${errorText}`); - } - - const data = await response.json(); - const { signature, expire, token } = data; - return { signature, expire, token }; - } catch (error) { - throw new Error(`Authentication request failed: ${error.message}`); - } -}; -``` - -*Note*: Avoid generating security parameters on the client side. Always send a request to your backend to retrieve security parameters, as the generation of these parameters necessitates the use of your Imagekit `privateKey`, which must not be included in client-side code. +ImageKit React SDK provides a simple way to integrate ImageKit.io with your React applications. It allows you to easily: +- Render images and video with automatic optimization and responsive sizes. +- Apply transformations to images and videos using URL parameters. +- Apply powerful AI-powered image transformations e.g. background removal, generative fill, object cropping, and more. ## Installation -```shell -npm install --save imagekitio-react -``` - -or - -```shell -yarn add imagekitio-react -``` - -## Usage - -### Initialization - -Import components in your code: - -```js -import { IKImage, IKVideo, IKContext, IKUpload } 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 - - - // Render an image using an absolute URL - https://www1.custom-domain.com/default-image.jpg?tr=w-100 - - - // Height and width manipulation - https://ik.imagekit.io/your_imagekit_id/tr:h-200,w-200/default-image.jpg - - - // Chained transformation - https://ik.imagekit.io/your_imagekit_id/tr:h-200,w-200:rt-90/default-image.jpg - +You can install the SDK in your project using npm or yarn. - // Video element with basic transformation, reduced quality by 50% using q:50 - - +```bash +npm install @imagekit/react ``` -#### Image lazy loading and low-quality placeholder -```js - - // Lazy loading image - - - /* - Low-quality image placeholder - Will first load https://ik.imagekit.io/your_imagekit_id/tr:h-200,w-200:q-20,bl-6/default-image.jpg, while the original image, i.e., https://ik.imagekit.io/your_imagekit_id/tr:h-200,w-200/default-image.jpg is being loaded in the background. - */ - - - // Low-quality image placeholder with custom quality and blur values - - - // Low-quality image placeholder and lazy loading of original image in the background - - -``` - -#### File upload example -```js -// Ensure you pass publicKey, urlEndpoint, and authenticator function to the parent IKContext component or to the IKUpload component directly. -Promise} - // This promise resolves with an object containing the necessary security parameters i.e `signature`, `token`, and `expire`. - > - - - // Passing different upload API options - - -``` - -## Demo application -* The official step-by-step React quick start guide - https://docs.imagekit.io/getting-started/quickstart-guides/react -* The official step-by-step React Native quick start guide - https://docs.imagekit.io/getting-started/quickstart-guides/react-native - -## Components - -The library includes 5 Components: - -* [`IKContext`](#IKContext) 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 `