You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* The official step by step React quick start guide - https://docs.imagekit.io/getting-started/quickstart-guides/react
139
-
* The official step by step React Native quick start guide - https://docs.imagekit.io/getting-started/quickstart-guides/react-native
138
+
* The official step-by-step React quick start guide - https://docs.imagekit.io/getting-started/quickstart-guides/react
139
+
* The official step-by-step React Native quick start guide - https://docs.imagekit.io/getting-started/quickstart-guides/react-native
140
140
* You can also run the demo application in [samples/sample-app](/samples/sample-app) folder as per the [README.md](/samples/sample-app/README.md).
141
141
142
142
## Components
@@ -151,7 +151,7 @@ The library includes 5 Components:
151
151
152
152
## IKContext
153
153
154
-
In order to use the SDK, you need to provide it with a few configuration parameters. You can use a parent `IKContext` component to define common options for all children `IKImage`, `IKVideo` or `IKupload`compoents. For example:
154
+
To use the SDK, you need to provide it with a few configuration parameters. You can use a parent `IKContext` component to define common options for all children `IKImage`, `IKVideo` or `IKupload`components. For example:
155
155
156
156
```js
157
157
<IKContext
@@ -177,16 +177,16 @@ will render:
177
177
178
178
## Image resizing
179
179
180
-
The `IKImage` component renders an `img` tag. It is used for rendering and manipulating images in real-time. `IKImage` component accepts the following props:
180
+
The `IKImage` component renders an `img` tag. It is used for rendering and manipulating images in realtime. `IKImage` component accepts the following props:
| urlEndpoint | String | Optional. The base URL to be appended before the path of the image. If not specified, the URL-endpoint specified in the parent `IKContext` component is used. For example, https://ik.imagekit.io/your_imagekit_id/endpoint/|
185
185
| path | String |Conditional. This is the path at which the image exists. For example, `/path/to/image.jpg`. Either the `path` or `src` parameter needs to be specified for URL generation. |
186
186
| src | String |Conditional. This is the complete URL of an image already mapped to ImageKit. For example, `https://ik.imagekit.io/your_imagekit_id/endpoint/path/to/image.jpg`. Either the `path` or `src` parameter needs to be specified for URL generation. |
187
187
| transformation | Array of objects |Optional. An array of objects specifying the transformation to be applied in the URL. The transformation name and the value should be specified as a key-value pair in the object. See list of [different tranformations](#list-of-supported-transformations). Different steps of a [chained transformation](https://docs.imagekit.io/features/image-transformations/chained-transformations) can be specified as the Array's different objects. The complete list of supported transformations in the SDK and some examples of using them are given later. If you use a transformation name that is not specified in the SDK, it is applied in the URL as it is. |
188
-
| transformationPosition | String |Optional. The default value is `path` that places the transformation string as a URL path parameter. It can also be specified as `query`, which adds the transformation string as the URL's query parameter i.e.`tr`. If you use `src` parameter to create the URL, then the transformation string is always added as a query parameter. |
189
-
| queryParameters | Object |Optional. These are the other query parameters that you want to add to the final URL. These can be any query parameters and not necessarily related to ImageKit. Especially useful if you want to add some versioning parameter to your URLs. |
188
+
| transformationPosition | String |Optional. The default value is `path`, which places the transformation string as a URL path parameter. It can also be specified as `query`, which adds the transformation string as the URL's query parameter i.e.`tr`. If you use the`src` parameter to create the URL, then the transformation string is always added as a query parameter. |
189
+
| queryParameters | Object |Optional. These are the other query parameters that you want to add to the final URL. These can be any query parameters and are not necessarily related to ImageKit. Especially useful if you want to add some versioning parameters to your URLs. |
190
190
| loading | String |Optional. Pass `lazy` to lazy load images. Note: Component does not accept change in this value after it has mounted. |
191
191
| lqip | Object |Optional. You can use this to show a low-quality blurred placeholder while the original image is being loaded e.g. `{active:true, quality: 20, blur: 6, raw: "n-lqip_named_transformation"`}. The default value of `quality` is `20`, and `blur` is `6`. If `raw` transformation is provided, SDK uses that and ignores the `quality` and `blur` parameters. <br /> Note: Component does not accept change in this value after it has mounted.|
192
192
@@ -208,12 +208,12 @@ The `IKImage` component renders an `img` tag. It is used for rendering and manip
208
208
}]}
209
209
/>
210
210
211
-
// Loading imgae from an absolute file path with no transformations - https://www.custom-domain.com/default-image.jpg
211
+
// Loading image from an absolute file path with no transformations - https://www.custom-domain.com/default-image.jpg
// Using a new tranformation parameter which is not there in this SDK yet - https://ik.imagekit.io/your_imagekit_id/tr:custom-value/default-image.jpg
216
+
// Using a new transformation parameter which is not there in this SDK yet - https://ik.imagekit.io/your_imagekit_id/tr:custom-value/default-image.jpg
217
217
<IKImage
218
218
path="/default-image.jpg"
219
219
transformation={[{
@@ -302,7 +302,7 @@ See the complete list of transformations supported in ImageKit [here](https://do
302
302
| effectContrast | e-contrast |
303
303
| effectGray | e-grayscale |
304
304
| original | orig |
305
-
| raw | The string provided in raw will be added in the URL as it is. |
305
+
| raw | The string provided in raw will be added to the URL as it is. |
306
306
307
307
</details>
308
308
@@ -328,13 +328,13 @@ Chained transforms make it easy to specify the order the transform is applied. F
328
328
329
329
### Lazy loading images
330
330
331
-
You can lazy load images using the `loading` prop. When you use `loading="lazy"`, all images that are immediately viewable without scrolling load normally. Those that are far below the device viewport are only fetched when the user scrolls near them.
331
+
You can lazy load images using the `loading` prop. When you use `loading="lazy"`, all images that are immediately viewable without scrolling load normally. Those far below the device viewport are only fetched when the user scrolls near them.
332
332
333
333
The SDK uses a fixed threshold based on the effective connection type to ensure that images are loaded early enough so that they have finished loading once the user scrolls near to them.
334
334
335
335
On fast connections (e.g 4G), the value of threshold is `1250px` and on slower connections (e.g 3G), it is `2500px`.
336
336
337
-
> You should always set the `height` and `width` of image element to avoid [layout shift](https://www.youtube.com/watch?v=4-d_SoCHeWE) when lazy-loading images.
337
+
> You should always set the `height` and `width` of the image element to avoid [layout shift](https://www.youtube.com/watch?v=4-d_SoCHeWE) when lazy-loading images.
338
338
339
339
Example usage:
340
340
@@ -390,7 +390,7 @@ You can also specify a `raw` transformation if you want more control over the UR
390
390
You have the option to lazy-load the original image only when the user scrolls near them. Until then, only a low-quality placeholder is loaded. This saves a lot of network bandwidth if the user never scrolls further down.
391
391
392
392
```js
393
-
// Loading a blurred low quality image placeholder and lazy-loading original when user scrolls near them
393
+
// Loading a blurred low quality image placeholder and lazy-loading original when the user scrolls near them
@@ -423,7 +423,7 @@ The `IKVideo` component renders a `video` tag. It is used for rendering and mani
423
423
| path | String |Conditional. This is the path at which the video exists. For example, `/path/to/video.mp4`. Either the `path` or `src` parameter needs to be specified for URL generation. |
424
424
| src | String |Conditional. This is the complete URL of a video already mapped to ImageKit. For example, `https://ik.imagekit.io/your_imagekit_id/endpoint/path/to/video.mp4`. Either the `path` or `src` parameter needs to be specified for URL generation. |
425
425
| transformation | Array of objects |Optional. An array of objects specifying the transformation to be applied in the URL. The transformation name and the value should be specified as a key-value pair in the object. See list of [different tranformations](#list-of-supported-transformations). The complete list of supported transformations in the SDK and some examples of using them are given later. If you use a transformation name that is not specified in the SDK, it gets applied as it is in the URL. |
426
-
| transformationPosition | String |Optional. The default value is path, which places the transformation string as a path parameter in the URL. It can also be specified as query, which adds the transformation string as the query parameter tr in the URL. If you use the src parameter to create the URL, then the transformation string is always added as a query parameter. |
426
+
| transformationPosition | String |Optional. The default value is `path`, which places the transformation string as a path parameter in the URL. It can also be `query`, which adds the transformation string as the query parameter tr in the URL. If you use the src parameter to create the URL, then the transformation string is always added as a query parameter. |
427
427
| queryParameters | Object |Optional. These are the other query parameters that you want to add to the final URL. These can be any query parameters and are not necessarily related to ImageKit. Especially useful if you want to add some versioning parameters to your URLs. |
428
428
429
429
### Basic video resizing examples
@@ -446,7 +446,7 @@ The `IKVideo` component renders a `video` tag. It is used for rendering and mani
// Using a new tranformation parameter which is not there in this SDK yet - https://ik.imagekit.io/demo/your_imagekit_id/tr:custom-value/sample-video.mp4
449
+
// Using a new transformation parameter which is not there in this SDK yet - https://ik.imagekit.io/demo/your_imagekit_id/tr:custom-value/sample-video.mp4
450
450
<IKVideo
451
451
path="/sample-video.mp4"
452
452
transformation={[{
@@ -469,15 +469,13 @@ transformation = [
469
469
]
470
470
```
471
471
472
-
473
-
474
472
## File upload
475
473
476
474
The SDK provides the `IKUpload` component to upload files to the [ImageKit Media Library](https://docs.imagekit.io/media-library/overview).
477
475
478
476
`IKUpload` component accepts the [ImageKit Upload API](https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload#request-structure-multipart-form-data) options as props.
479
477
480
-
The SDK provides `IKUpload` component to upload files to the ImageKit Media Library. It accepts the `fileName` parameter as a prop. The file parameter is provided as an input from the user.
478
+
The SDK provides `IKUpload` component to upload files to the ImageKit Media Library. It accepts the `fileName` parameter as a prop. The file parameter is provided as input from the user.
481
479
482
480
483
481
| Prop | Type | Description |
@@ -487,13 +485,13 @@ The SDK provides `IKUpload` component to upload files to the ImageKit Media Libr
487
485
| tags | Array of string | Optional. Set the tags while uploading the file e.g. ["tag1","tag2"]|
488
486
| folder | String | Optional. The folder path (e.g. `/images/folder/`) in which the file has to be uploaded. If the folder doesn't exist before, a new folder is created.|
489
487
| isPrivateFile | Boolean | Optional. Accepts `true` of `false`. The default value is `false`. Specify whether to mark the file as private or not. This is only relevant for image type files|
490
-
| customCoordinates | String | Optional. Define an important area in the image. This is only relevant for imagetype files. To be passed as a string with the `x` and `y` coordinates of the top-left corner, and `width` and `height` of the area of interest in format `x,y,width,height`. For example - `10,10,100,100`|
488
+
| customCoordinates | String | Optional. Define an important area in the image. This is only relevant for image-type files. To be passed as a string with the `x` and `y` coordinates of the top-left corner and `width` and `height` of the area of interest in the format `x,y,width,height`. For example - `10,10,100,100`|
491
489
| responseFields | Array of string | Optional. Values of the fields that you want upload API to return in the response. For example, set the value of this field to `["tags", "customCoordinates", "isPrivateFile"]` to get value of `tags`, `customCoordinates`, and `isPrivateFile` in the response. |
492
490
| inputRef | Reference | Optional. Forward reference to the core HTMLInputElement.|
493
-
| onUploadStart | Function callback | Optional. Called before upload is started. The first and only argument is the HTML input's change event |
494
-
| onUploadProgress | Function callback | Optional. Called while upload is in progress. The first and only argument is the ProgressEvent |
495
-
| validateFile | Function callback | Optional. Called before upload is started to run custom validation. The first and only argument is the file selected for upload. If the callback returns `true`, the upload is allowed to continue. But, if it returns `false`, the upload is not done |
496
-
| onSuccess | Function callback | Optional. Called if the upload is successful. The first and only argument is the response JSON from the upload API. The request-id, response headers and HTTP status code are also accessible using the $ResponseMetadata key that is exposed from the [javascript sdk](https://github.com/imagekit-developer/imagekit-javascript#access-request-id-other-response-headers-and-http-status-code)|
491
+
| onUploadStart | Function callback | Optional. Called before the upload is started. The first and only argument is the HTML input's change event |
492
+
| onUploadProgress | Function callback | Optional. Called while an upload is in progress. The first and only argument is the ProgressEvent |
493
+
| validateFile | Function callback | Optional. Called before the upload is started to run custom validation. The first and only argument is the file selected for upload. If the callback returns `true`, the upload is allowed to continue. But, if it returns `false`, the upload is not done |
494
+
| onSuccess | Function callback | Optional. Called if the upload is successful. The first and only argument is the response JSON from the upload API. The request-id, response headers, and HTTP status code are also accessible using the $ResponseMetadata key that is exposed from the [javascript sdk](https://github.com/imagekit-developer/imagekit-javascript#access-request-id-other-response-headers-and-http-status-code)|
497
495
| onError | Function callback | Optional. Called if upload results in an error. The first and only argument is the error received from the upload API |
498
496
| urlEndpoint | String | Optional. If not specified, the URL-endpoint specified in the parent `IKContext` component is used. For example, https://ik.imagekit.io/your_imagekit_id/endpoint/|
499
497
| publicKey | String | Optional. If not specified, the `publicKey` specified in the parent `IKContext` component is used.|
@@ -596,7 +594,7 @@ var imageURL = imagekit.url({
596
594
597
595
## Error Handling
598
596
599
-
You can use `ErrorBoundary` to handle errors anywhere in their child component tree. Log those errors or display a fallback UI instead of the component tree that crashed. For example:
597
+
You can use `ErrorBoundary` to handle errors anywhere in their child component tree. Log those errors or display a fallback UI instead of the crashed component tree. For example:
600
598
601
599
```js
602
600
// urlEndpoint should be present in IKImage or parent IKContext component; otherwise, it will throw an error. For example:
0 commit comments