create-react-appCLI 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:
authenticationEndpointparameters 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.
src/App.jsfile, then add the
IKImagefrom the SDK:
App. Along with the image
pathprop, it also needs the prop for
App.jsfile should look like this now:
https://www.custom-domain.com/default-image.jpgthen you can use
srcprop to load the image.
urlEndpointin every instance of
IKImage. This can be managed much more easily with the
IKContextis a wrapper that can be configured with your SDK initialization parameters. Pass your
urlEndpointto it as a prop, and you're good to go!
IKContextcomponent to the render function:
IKImagecomponents within it, so that those can access the
urlEndpointfrom the context wrapper.
wparameter. 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.
IKImagecomponent. 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.
IKUploadcomponent which renders an
input type="file"tag that you can use to upload files to the ImageKit media library directly from the client-side.
serverfolder in the project root.
server/index.jsfile should look now. Replace
<YOUR_IMAGEKIT_PRIVATE_KEY>with actual values:
http://localhost:3001/auth, you should see a JSON response like this. Actual values will vary.
authenticationEndpointin the frontend React app:
IKContextinstance which will hold our upload component:
src/App.jsshould look now. Replace
<YOUR_IMAGEKIT_PUBLIC_KEY>with actual values:
IKUploadcomponent. Let's import it from the SDK into our
IKUploadcomponent nested within
IKContext, as well as a couple of event handlers for upload error and success,
onErrorcallback functions as props like we have.
filePathreturned in the upload response.
ErrorBoundaryis used to gracefully handle errors anywhere in the child component tree of a React app.