2 easy ways to get data from Unsplash.com in React

#react #api #javascript #unsplash

Since Unsplash.com released their API and I just love their content, I decided to write a short article on how to use it with React. Unsplash is awesome! :) Enjoy.

âž¡ï¸ Github Repo is available here â¬…ï¸

"Everything negative - pressure, challenges - is all an opportunity for me to rise." - Kobe Bryant

Set up the basics

To set up the basics, I use the code base from another project I did, using:

create-react-app
React components that basically render images in a list

Fetch data with the fetch API

use the fetch API like:

componentDidMount() {
    fetch('https://api.unsplash.com/photos/?client_id=' + cred.APP_ID)
        .then(res => res.json())
        .then(data => {
            this.setState({ imgs: data });
        })
        .catch(err => {
            console.log('Error happened during fetching!', err);
        });
}

use componentDidMount lifecycle when fetching data (DOM is represented)
describe a fetch method using Promise functionality
transform the call into a JSON object and pass it into state
after that, simply render out each image from the fetched link

âž¡ï¸ See the Github Repo after those steps â¬…ï¸

Fetch data using a library

Fetching can also be accomplished by one of many libraries. I will use axios, since it provides cool features like:

Make XMLHttpRequests from the browser
Make http requests from node.js
Supports the Promise API
Intercept request and response
Transform request and response data
Cancel requests
Automatic transforms for JSON data
Client side support for protecting against XSRF

So the next steps are:

add the axios package
simply adapt the fetch method to the methods from the axios package

componentDidMount() {
    axios
        .get('https://api.unsplash.com/photos/?client_id=' + cred.APP_ID)
        .then(data => {
            this.setState({ imgs: data.data });
        })
        .catch(err => {
            console.log('Error happened during fetching!', err);
        });
}

Very easy and works well:)

âž¡ï¸ See the Github Repo after those steps â¬…ï¸

Looks like this:

Add search feature

adapt your fetched link (add query and search parameters)
make your request dynamic, connecting the search query to your app
add a searchbar component
make sure to bind all methods (use the arrow functions or bind them manually)

performSearch = query => {
  axios
    .get(
      `https://api.unsplash.com/search/photos/?page=1&per_page=10&query=${query}&client_id=${cred.APP_ID}`
    )
    .then(data => {
      this.setState({ imgs: data.data.results });
    })
    .catch(err => {
      console.log('Error happened during fetching!', err);
    });
};

Polish up React code

use the ref-attribute for the input

this.props.onSearch(this.query.value);
--------
ref={input => (this.query = input)}

set a default for your performSearch method and put the performSearch into the componentDidMount lifecycle
render out a different component when no images can be found with an if statement
use conditional rendering to render a paragraph when the fetch is not finished (setting a flag to the state and changing it in the fetch method)

<div className="main-content">
    {this.state.loadingState
        ? <p>Loading</p>
        : <ImgList data={this.state.imgs} />}
</div>

âž¡ï¸ See the Github Repo after those steps â¬…ï¸

â That was incredible easy and already shows how much you can do with the API :)

Adapt to Unsplash guidelines

When using an API always, ALWAYS, make sure to read their guidelines.
âž¡ï¸ Unsplash API guidelines

So as an example here, I didn't credit Unsplash or the photographer. Therefore I have to improve my app by retrieving more information from the data and adding credits to the owners:

const Img = props =>
    <li>
        <a href={props.link}>
            <img src={props.url} alt="Unsplash Image here" />
        </a>
        <p>
            Photo by
            <a href={props.user}>{props.name}</a>
            <a href={props.link}> See on Unsplash</a>
        </p>
    </li>;