How to use unsplash-js - 10 common examples

selectUnsplashImage(image) {
            const unsplash = new Unsplash({ accessKey: this.settings.unsplash });

            // Trigger a download to properly attribute traffic to the source
            // https://help.unsplash.com/en/articles/2511258-guideline-triggering-a-download
            unsplash.photos.downloadPhoto(image);

            this.post.featured_image = image.urls.regular;
            this.post.featured_image_caption = this.buildImageCaption(image);

            this.selectedUnsplashImage = image;
            this.unsplashImages = [];
            this.unsplashPage = 1;
            this.searchKeyword = '';
            this.$refs.modal.classList.remove(...this.galleryModalClasses);

            this.$emit('changed', {
                url: image.urls.regular,

const response = await unsplash.search.photos(
    query,
    1 + Math.ceil(offset / limit),
    limit
  )

  if (!response.ok) {
    const err = new Error(
      `unsplash error ${response.status} "${response.statusText}"`
    )
    err.status = response.status
    throw err
  }

  const results = await toJson(response)

  if (results.results) {
    const sizes = ['small', 'regular'] // 'thumb', 'full'
    console.log(
      `unplash image search "${query}" => ${results.results.length} results (${results.total} total)`
    )

    const transformedResults = results.results
      .map((result) => {
        // console.log(JSON.stringify(result, null, 2))

        let largest = null
        let smallest = null

        for (let i = 0; i < sizes.length; ++i) {
          const image = result.urls[sizes[i]]

/**
 * Note: even though most APIs don't, unsplash specifically recommends
 * hotlinking their images, which makes our integration easier.
 */

'use strict'

// ugly hack required for unsplash client to work
global.fetch = require('node-fetch')

const { toJson, default: Unsplash } = require('unsplash-js')

const unsplash = new Unsplash({
  accessKey: process.env.UNSPLASH_ACCESS_KEY,
  secret: process.env.UNSPLASH_SECRET_KEY
})

const utm = '?utm_source=saasify&utm_medium=referral&utm_campaign=api-credit'

module.exports = async (opts) => {
  const { query, offset, limit } = opts

  const response = await unsplash.search.photos(
    query,
    1 + Math.ceil(offset / limit),
    limit
  )

  if (!response.ok) {

import config from 'universal-config';
import Unsplash, { toJson } from 'unsplash-js';

const unsplash = new Unsplash({
  accessKey: config.get('ACCESS_KEY')
});

users();
photos();
collections();
stats();

function users() {
  console.log("\nUsers")

  unsplash.users.profile('naoufal')
    .then(toJson)
    .then(json => {
      console.log(json);
    });

closeUnsplashAndInsertImage(image) {
                const unsplash = new Unsplash({accessKey: this.unsplashKey});
                unsplash.photos.downloadPhoto(image);

                this.selectedUnsplashImage = image

                this.$emit('changed', {
                    url: this.selectedUnsplashImage.urls.regular,
                    caption:
                        this.trans.posts.forms.editor.images.picker.caption.by +
                        ' <a href="' +
                        this.selectedUnsplashImage.user.links.html +
                        '" target="_blank">' +
                        this.selectedUnsplashImage.user.name +
                        '</a> ' +
                        this.trans.posts.forms.editor.images.picker.caption.on +
                        ' <a href="https://unsplash.com" target="_blank">Unsplash</a>',
                })

}
  if(offlineTestPath) {
    console.info('Unsplash: found offline test path', offlineTestPath)
    return {
      random: () => Promise.resolve(require(offlineTestPath).search)
        .then(formatUnsplashResult),
      search: (query) => Promise.resolve(require(offlineTestPath).search)
        .then(formatUnsplashResult),
    };
  }
  if(!accessKey || !appName) throw 'Unsplash bank image requires options: accessKey, appName.';
  const fetch = require('node-fetch');
  global.fetch = fetch;
  const Unsplash = require('unsplash-js').default;
  const {toJson} = require('unsplash-js');
  const unsplash = new Unsplash({ accessKey })
  return {
    random: () => unsplash.photos.listPhotos(1, 50)
      .then(toJson)
      .then(json => { return {
        total: json.length,
        pages: 1,
        results: json,
      }})
      .then(formatUnsplashResult),
    search: (query) => unsplash.search.photos(query, 1, 50)
      .then(toJson)
      .then(formatUnsplashResult),
  };
}

this.setState({ isLoading: true });

    const { searchKey, results } = this.state;

    if (results[searchKey] && results[searchKey].page === page) {
      this.setState({
        results: {
          ...results,
          [searchKey]: results[searchKey]
        },
        isLoading: false
      });
      return;
    }

    const unsplash = new Unsplash({
      applicationId: "dd0e4c053fe4fa6e93c7cacc463fafe6c5eeaf5f4f6a2d794332a875e2df96b3",
      secret: "d22a4cac1f7f1c570a0ba09f7b60a8c95217f81906fbb26ab365380fa4a04dd6",
      callbackUrl: "urn:ietf:wg:oauth:2.0:oob"
    });

    unsplash.search.all(searchKey, page, 28)
    .then(response => response.json())
    .then(json => {
      this.setSearchPhotos(json.photos.results, page);
    });
  }

if (!accessKey) {
      throw new Error(
        'Must provide an accessKey to Unsplash Image Field. See https://unsplash.com/documentation#creating-a-developer-account'
      );
    }

    if (!secretKey) {
      throw new Error(
        'Must provide a secretKey to Unsplash Image Field. See https://unsplash.com/documentation#creating-a-developer-account'
      );
    }

    super(...arguments);
    this.graphQLOutputType = 'UnsplashImage';

    this.unsplash = new UnsplashAPI({
      applicationId: accessKey,
      secret: secretKey,
    });
  }

import React, { useState } from 'fl-react'
import { Switch, Route } from 'fl-react-router-dom'
import { Page } from 'assistant/lib'
import Unsplash from 'unsplash-js'

const unsplash = new Unsplash( {
	applicationId: 'c09e42c595ba312b458f788cd08934dbf79834aacf4c205f4561ef8bdcedefc9',
	secret: 'a3edadbe892968502ae3a1191bea92cb44daebad80c1c18fcbadf9a48c1a4673'
} )

export const App = ( { match } ) => {
	const { url } = match
	return (
		<Switch>
			<Route exact path={`${url}/`} component={Main} />
		</Switch>
	)
}

const Main = () => {
	const [ term, setTerm ] = useState( '' )
	const [ results, setResults ] = useState( [] )

fetchUnsplashImages($state) {
                const unsplash = new Unsplash({accessKey: this.unsplashKey})
                unsplash.search.photos(this.searchKeyword, this.unsplashPage, this.unsplashPerPage)
                    .then(toJson)
                    .then(json => {
                        if (!isEmpty(json.results)) {
                            this.unsplashImages.push(...json.results)
                            this.unsplashPage += 1;

                            $state.loaded()
                        } else {
                            $state.complete()
                        }
                    });
            },