unsplash-image-picker

unsplash-image-picker

Provide component to search and choose image from unsplash images

Live Demo

Live Demo Code Sandbox

Install

npm install --save unsplash-image-picker

Usage

Package provide 2 component to search and choose image from unsplash images.

• UnsplashImagePicker - search and choose image from unsplash images
• UnsplashImagePickerModal - Display modal to search and choose image from unsplash images

How to use UnsplashImagePickerModal

import React, { Component } from 'react'
import UnsplashImagePickerModal from 'unsplash-image-picker'
import 'unsplash-image-picker/dist/index.css'

const App = () => {
  const [active, setActive] = React.useState(false)
  const unsplashAccessKey = 'UNSPLASH_ACCESS_KEY'
  const [photos, SetPhotos] = React.useState([])
  return (
    <div>
      <button
        onClick={() => {
          setActive(true)
        }}
      >
        Show Picker
      </button>
      <UnsplashImagePickerModal
        unsplashAccessKey={unsplashAccessKey}
        active={active}
        setActive={setActive}
        initialPhotoSearchQuery=''
        onPhotoSelect={(photo) => {
          let list = photos ?? []
          list.push(photo)
          SetPhotos(list)
          setActive(false)
        }}
      />
    </div>
  )
}

How to use UnSplashImagePicker

import React from 'react'
import 'unsplash-image-picker/dist/index.css'
import { UnSplashImagePicker } from 'unsplash-image-picker'

const App = () => {
  const [photos, setPhotos] = React.useState([])
  const unsplashAccessKey = 'UNSPLASH_ACCESS_KEY'
  return (
    <div className='App '>
      <UnSplashImagePicker
        unsplashAccessKey={unsplashAccessKey}
        initialPhotoSearchQuery=''
        onPhotoSelect={(photo) => {
          let list = photos ?? []
          list.push(photo)
          SetPhotos(list)
        }}
      />
    </div>
  )
}

export default App

To get UNSPLASH ACCESS KEY, you can register at unsplash.com

License

MIT © thealphamerc