If you're really into Unsplash community, like photography and have something to do with React/Next.js, you may, sometimes, wish to have Unsplash photos integrated into your products/applications.
Unsplash Developers API got your back! And it's FREE.
You could definitely build an Unsplash Photos gallery into your applications easily, wouldn't be so tricky to do, however, it may take time to follow the required guidelines from Unsplash on how to integrate and use their community photos.
First, you may need to login into your Unsplash account to be able to get one. If you didn't have one, please try to create one, this shouldn't too hard to sign up one.
Fill in necessary information and tick on consent boxes.
When finished, all you need to create a Unsplash Photo gallery is the Access Key. Other keys such as Application ID and Secret Key, we don't need that.
FYI
Application ID and Secret Key are only needed for special actions like editing, uploading, creating a collections/photos while not to be the case for retrieving/searching for photos
Don't leak your keys
When dealing with API keys, never put it in any public places such as GitHub, BitBucket, GitLab or anywhere on the Internet.
Copy your Access Key and store it securely, such as .env files and not to upload it to anywhere publicly on the Internet, ever!
If you failed to practice those rules, Unsplash may ban your account/keys.
As you might already know, Access Key that you previously got, it shouldn't be found anywhere publicly, so you may need to hide your requests from the user browser. But how can we do this?
Clearly with a client-side application, it may require a server-side part to hide the request. Since we're using Next.js, we simply don't have to - it's one of Next.js's edges!
While implementing the Unsplash Photo gallery for my website, I think it would be great if I can make it an NPM component that can be used in several projects.
It's just the UI, not much about the logic so you can do it yourself.
powershell
npm i react-unsplash
Install the UI accelerator component for Unsplash Gallery
And use it inside your application as a React Component, the sample usage would be:
Confusing? I know, I would be confused too. But let me break it down
> initValue - is the initial value that you want the Unsplash gallery to be filled and make request to that search term in prior to what to be searched later.
For example, you may want to show a placeholder of "coffee" photos as a suggestion of how to search. See below, when loaded, the gallery will be filled with coffee and coffee images!
764 x 583, 642.4 KB, PNG
> loading - is an indicator of loading state, it should be the loading state of pending requests, for example, a loading state should be shown when you're getting the photos from Unsplash.
Example: If you are using a fetch library like SWR - a React library that helps to fetch and revalidate data effectively - you may use the isLoading state from its hook as this property value.
Explanation: the currentSearch prop is to not to reset the page to 1 if the user is scrolling down for next pages of the same search query.
> onCommit - fires immediately after the user hits enter, this means, they want to commit with their search terms and the app should start looking for those photos.
In my case, this will fire searchNow function, without debounce functionality
onCommit should fire the search function immediately
I have a question!
Why you just set the search prop, which part of it that would trigger a search?
You got your point, actually, SWR automatically revalidate and re-fetch if one of the input changes, in this case, the query is changed, so it would trigger the request!
> onSelect - fires when the user clicks on one of the photos, it will call onSelect with the photo details (defined by Unsplash API)
In my case, I will do like so, just to select some of the photo info because I don't want them all.
You may notice that, why track usage? It actually one of the rules of user behavior when dealing with Unsplash photos, you need to send a request to the link under info.links.download_location so that they can track that image usages.
> images - an array of Unsplash images returned by the API.