thealphamerc / unsplash-image-picker

React library to search and select photos from Unsplash

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

unsplash-image-picker's Issues

Allow different orientations

Hey, thanks for developing this!

I'd love to be able to adjust the orientation requested. Right now, it seems like it's hard coded here:

unsplash-image-picker/src/component/picker/index.tsx

Line 54 in 3932313

orientation: 'landscape'

It would be great to have the option of passing to the component what gets sent through unsplash.search.getPhotos().

I'm not very well setup to develop in typescript so sorry for just asking instead of suggesting a pull request, but if this can be done it would be greatly appreciated!