create-react-app
CLI utility provided by React to build a new project:src/App.js
. This is where we will do most of our work. It should look like this:http://localhost:3000/
urlEndpoint
is a required parameter. This can be obtained from the URL-endpoint section or the developer section on your ImageKit dashboard.publicKey
and authenticationEndpoint
parameters are optional and only needed if you want to use the SDK for client-side file upload. These can be obtained from the Developer section on your ImageKit dashboard.privateKey
parameter while initializing this SDK, it will throw an error.IKContext
for defining authentication context, i.e. urlEndpoint
, publicKey
and authenticationEndpoint
to all child elements.src/App.js
file, then add the urlEndpoint
:IKImage
component. IKImage
from the SDK:App
. Along with the image path
prop, it also needs the prop for urlEndpoint
:App.js
file should look like this now:width
prop:<img>
tag level only. Intrinsically, the fetched image is still 1000px wide.https://www.custom-domain.com/default-image.jpg
then you can use src
prop to load the image.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!App.js
file:IKContext
component to the render function:IKImage
components within it, so that those can access the urlEndpoint
from the context wrapper.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.h
and w
parameter instead of height
and width
.
See the complete list of transformations supported in ImageKit here.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.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.http://localhost:3001/auth
. index.js
inside server
folder in the project root.server/index.js
file should look now. Replace <YOUR_IMAGEKIT_URL_ENDPOINT>
, <YOUR_IMAGEKIT_PUBLIC_KEY>
and <YOUR_IMAGEKIT_PRIVATE_KEY>
with actual values:authenticationEndpoint
should be implemented in your backend. The SDK makes an HTTP GET request to this endpoint and expects a JSON response with three fields i.e. signature
, token
, and expire
. Learn how to implement authenticationEndpoint on your server.http://localhost:3001/auth
, you should see a JSON response like this. Actual values will vary.publicKey
and authenticationEndpoint
in the frontend React app:IKContext
instance which will hold our upload component:src/App.js
should look now. Replace <YOUR_IMAGEKIT_URL_ENDPOINT>
and <YOUR_IMAGEKIT_PUBLIC_KEY>
with actual values:IKUpload
component. Let's import it from the SDK into our App.js
file:IKUpload
component nested within IKContext
, as well as a couple of event handlers for upload error and success, onError
and onSuccess
respectively:onSuccess
and onError
callback functions as props like we have.IKImage
with the filePath
returned in the upload response.ErrorBoundary
is used to gracefully handle errors anywhere in the child component tree of a React app.