React
Real-time image & video resizing, automatic optimization, and file uploading in React using ImageKit.io.
This is a quick start guide to show you how to integrate ImageKit in a React application. The code samples covered here are hosted on GitHub: https://github.com/imagekit-samples/quickstart/tree/master/react.
This guide walks you through the following topics:
Setup ImageKit React SDK
For this tutorial, it is recommended to create a dummy React app, as shown below.
Create a React app:
Let's use the create-react-app
CLI utility provided by React to build a new project:
Navigate to the project directory:
Open up the project in your text editor of choice, and navigate to src/App.js
. This is where we will do most of our work. It should look like this:
Now run the app:
In your web browser, navigate to http://localhost:3000/
You should see the dummy app created by React CLI. Now we can begin our work.
Install the ImageKit React SDK:
Installing the ImageKit React SDK in our app is pretty simple:
Initialize the React SDK:
Before the SDK can be used, let's learn about and obtain the requisite initialization parameters:
urlEndpoint
is a required parameter. This can be obtained from the URL-endpoint section or the developer section on your ImageKit dashboard.publicKey
andauthenticator
parameters are optional and only needed if you want to use the SDK for client-side file upload.publicKey
can be obtained from the Developer section on your ImageKit dashboard.authenticator
expects an asynchronous function that resolves with an object containing the necessary security parameters i.e signature, token, and expire.
Note: Do not include your API private key in any client-side code, including this SDK or its initialization. If you pass the privateKey
parameter while initializing this SDK, it will throw an error.
ImageKit Components:
This SDK provides 3 components:
IKImage
for image rendering. The output is a<img>
tag.IKVideo
for video resizing. This renders a<video>
tag.IKUpload
for file uploading. The output is a<input type="file">
tag.IKContext
for defining authentication context, i.e.urlEndpoint
,publicKey
andauthenticator
to all child elements.
You can import components individually:
Configure the app for ImageKit:
Let's remove the existing dummy code in src/App.js
file, then add the urlEndpoint
:
Rendering images
Loading image from relative path:
Remember the default image we mentioned earlier? It should be available at the following URL:
Let's fetch and display it! For this, we will use the IKImage
component.
Import IKImage
from the SDK:
Now let's add it to our App
. Along with the image path
prop, it also needs the prop for urlEndpoint
:
Rendered HTML element:
The App.js
file should look like this now:
Your React app should now display the default image in its full size:
You can pass styles and other attributes as props. For e.g. lets add 400px width_ _by adding the width
prop:
This is how the output should look now:
Note that here we have set the width to 400px at the <img>
tag level only. Intrinsically, the fetched image is still 1000px wide.
Loading image from an absolute path:
If you have an absolute image path coming from the backend API e.g. https://www.custom-domain.com/default-image.jpg
then you can use src
prop to load the image.
For example:
The output looks like this:
Setting ImageKit context for the SDK
It is not necessary to specify the urlEndpoint
in every instance of IKImage
. This can be managed much more easily with the IKContext
component.
IKContext
is a wrapper that can be configured with your SDK initialization parameters. Pass your urlEndpoint
to it as a prop, and you're good to go!
Let's go ahead and import it within the App.js
file:
Now add the IKContext
component to the render function:
Let's nest our IKImage
components within it, so that those can access the urlEndpoint
from the context wrapper.
Basic image manipulation
Let’s now learn how to manipulate images using transformations.
The React SDK gives a name to each transformation parameter, e.g. height
for h
and width
for w
parameter. It makes your code more readable. If the property does not match any of the available options, it is added as it is. See the full list of supported transformations in React SDK on Github.
You can also use h
and w
parameter instead of height
and width
.
See the complete list of transformations supported in ImageKit here.
Height and width manipulation
To resize an image along with its height or width, we need to pass the transformation
object as a prop to IKImage
.
Let’s resize the default image to 200px height and width:
Rendered HTML element:
Refresh your browser to get the resized image.
Quality manipulation
You can use the quality parameter to change image quality like this:
Rendered HTML:
Crop mode
Let’s now see how cropping works. We will try the extract
crop strategy. In this strategy, instead of resizing the whole image, we extract out a region of the requested dimension from the original image. You can read more about this here.
Rendered HTML element:
Chained transformation
Chained transformations provide a simple way to control the sequence in which transformations are applied.
Let’s try it out by resizing an image, then rotating it:
Transformation URL:
Now, rotate the image by 90 degrees.
Chained Transformation URL:
Let’s flip the order of transformation and see what happens.
Chained Transformation URL:
Adding overlays
ImageKit.io enables you to apply overlays to images and videos using the raw parameter with the concept of layers. The raw parameter facilitates incorporating transformations directly in the URL. A layer is a distinct type of transformation that allows you to define an asset to serve as an overlay, along with its positioning and additional transformations.
Text as overlays
You can add any text string over a base video or image using a text layer (l-text).
For example:
Sample Result URL
Output Image:
Image as overlays
You can add an image over a base video or image using an image layer (l-image).
For example:
Sample Result URL
Output Image:
Solid color blocks as overlays
You can add solid color blocks over a base video or image using an image layer (l-image).
For example:
Sample Result URL
Output Image:
Lazy-loading images in React
You can lazy load images using the loading
prop in IKImage
component. 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.
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.
You should always set the height and width of the image element to avoid layout shift when lazy-loading images.
Rendered HTML element:
Blurred image placeholder
To improve user experience, you can use a low-quality blurred variant of the original image as a placeholder while the original image is being loaded in the background. Once the loading of the original image is finished, the placeholder is replaced with the original image.
Combining lazy loading with low-quality placeholders
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.
Uploading files in React
Let's now learn how to upload an image to our media library.
React SDK provides IKUpload
component which renders an input type="file"
tag that you can use to upload files to the ImageKit media library directly from the client-side.
To implement this functionality, a backend server is needed to authenticate the request using your API private key.
Setup the backend app
For this quickstart guide, we will create a sample Node.js server which will provide an authentication endpoint at http://localhost:3001/auth
.
Let's create a file index.js
inside server
folder in the project root.
Install the basic packages needed to create a dummy server for ImageKit backend authentication:
We will use the ImageKit Node.js SDK to implement http://localhost:3001/auth
.
The backend SDK requires your API public key, private key, and URL endpoint. You can obtain them from Developer Options and URL-endpoint pages respectively.
This is how server/index.js
file should look now. Replace <YOUR_IMAGEKIT_URL_ENDPOINT>
, <YOUR_IMAGEKIT_PUBLIC_KEY>
and <YOUR_IMAGEKIT_PRIVATE_KEY>
with actual values:
Let's run the backend server.
You should see a log saying that the app is “Live on port 3001”.
If you GET http://localhost:3001/auth
, you should see a JSON response like this. Actual values will vary.
Configure authentication in the frontend app
Now that we have our authentication server up and running, let's configure the publicKey
and authenticator
in the frontend React app:
Add the following to src/App.js
file to initialize the SDK with auth params:
Now, pass these values as props into a new IKContext
instance which will hold our upload component:
This is how src/App.js
should look now. Replace <YOUR_IMAGEKIT_URL_ENDPOINT>
and <YOUR_IMAGEKIT_PUBLIC_KEY>
with actual values:
Upload an image
For this, we will use the IKUpload
component. Let's import it from the SDK into our App.js
file:
Add the IKUpload
component nested within IKContext
, as well as a couple of event handlers for upload error and success, onError
and onSuccess
respectively:
This is how it looks in the UI:
Direct file uploading from the browser
Let’s now upload an image by selecting a file from the file input.
When you choose a file, the file is immediately uploaded. You can pass optional onSuccess
and onError
callback functions as props like we have.
You can verify that file was successfully uploaded by checking the browser console. In case of success, it should print a success message, like this:
The response object would look similar to this (values may vary):
After a successful upload, you should see the newly uploaded image in the Media Library section of your ImageKit dashboard.
If you don't see the image, check if there are any errors in the browser console log. Then verify whether the API private key has been configured correctly in the server app and if the server app is running.
Fetching uploaded file
Fetch uploaded image and show in UI using IKImage
with the filePath
returned in the upload response.
The app should display your uploaded image correctly!
Advanced file upload
A more detailed example of how to use the file upload component (and an explanation of each advanced feature) is presented below:
Custom Upload Button
We have created a ref
to the input
used inside the IKUpload
component called ikUploadRefTest
. The IKUpload
component can be given styling via className
or style
(style={{display: 'none'}}
) to hide the default file selector. Then we can use the custom upload button as described above.
Abort uploads
We have created a ref
to the IKUpload
component called ikUploadRefTest
. This ref
can be used to call the abort
method in the IKUpload
component and can be used to abort the ongoing upload.
Upload start
The onUploadStart
prop is called when the file upload starts. This can be used for common use cases like showing a spinner, progress bar, etc.
Show progress bar
The onUploadProgress
prop can be passed like above, which will have a ProgressEvent. This can be used to show the percentage of upload progress to the end user.
Validate file before upload
Arbitrary validation (file type, file size, file name) etc can be added using the validateFile
prop. An example has been added above that shows how to prevent upload if the file size is bigger than 2 MB.
Additional options to the upload function
All the parameters supported by the ImageKit Upload API can be passed as shown above (e.g. extensions
, webhookUrl
, customMetadata
etc.)
Rendering videos
Rendering videos works similarly to rendering images in terms of usage of urlEndpoint
param (either directly or via IKContext
).
Loading video from relative path: Import IKVideo
from the SDK:
Now let's add it to our App. Along with the video path prop, it also needs the relevant urlEndpoint
(either directly or via IKContext
):
A more complex example:
Error boundaries
We strongly recommend using Error Boundaries to handle errors in the React UI. ErrorBoundary
is used to gracefully handle errors anywhere in the child component tree of a React app.
It can be used to log errors and display a fallback UI instead of the component tree that crashed.
Example:
What's next
The possibilities for image manipulation and optimization with ImageKit are endless. Learn more about it here:
Last updated