How to use the unsplash-js function in unsplash-js

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,

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 +
                        '">' +
                        this.selectedUnsplashImage.user.name +
                        '</a> ' +
                        this.trans.posts.forms.editor.images.picker.caption.on +
                        ' <a href="https://unsplash.com">Unsplash</a>',
                })

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 (
		
	)
}

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()
                        }
                    });
            },

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 UnsplashExample = ( { match } ) => (
	
)

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

	const onChange = e => {
		const value = e.currentTarget.value

constructor(){
        super();

        this._unsplash = new Unsplash({
            applicationId: "0acf8fe9a6e08e2d801b9198fc156f3e943480b5e87a3a7fff2f2c772bf5dd08",
            secret: "",
            callbackUrl: ""
        });

        this.state = {
            error: false,
            term: "",
            results: []
        };
    }