https://github.com/thealphamerc/unsplash-image-picker

React library to search and select photos from Unsplash
https://github.com/thealphamerc/unsplash-image-picker

image-picker-library photos picker react unsplash-api unsplash-photos

Last synced: 10 months ago
JSON representation

React library to search and select photos from Unsplash

• Host: GitHub
• URL: https://github.com/thealphamerc/unsplash-image-picker
• Owner: TheAlphamerc
• Created: 2022-08-18T06:58:25.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-09-24T14:10:48.000Z (over 3 years ago)
• Last Synced: 2025-08-09T18:18:35.489Z (10 months ago)
• Topics: image-picker-library, photos, picker, react, unsplash-api, unsplash-photos
• Language: TypeScript
• Homepage: https://thealphamerc.github.io/unsplash-image-picker/
• Size: 1.07 MB
• Stars: 19
• Watchers: 2
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

          
# unsplash-image-picker

Provide component to search and choose image from unsplash images

[![npm](https://img.shields.io/npm/v/unsplash-image-picker?color=brightgreen)](https://www.npmjs.com/package/unsplash-image-picker) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2FTheAlphamerc%2Funsplash-image-picker&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com)

## Live Demo

[Live Demo](https://thealphamerc.github.io/unsplash-image-picker/) [Code Sandbox](https://codesandbox.io/s/unsplash-image-picker-example-c7jzs1?file=/src/App.js)

## Install

```bash

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

```tsx

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 (

    


       {

          setActive(true)

        }}

      >

        Show Picker

      

       {

          let list = photos ?? []

          list.push(photo)

          SetPhotos(list)

          setActive(false)

        }}

      />

    

  )

}

```


### How to use UnSplashImagePicker

```tsx

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 (

    


       {

          let list = photos ?? []

          list.push(photo)

          SetPhotos(list)

        }}

      />

    

  )

}


export default App

```

> To get UNSPLASH ACCESS KEY, you can register at [unsplash.com](https://unsplash.com/join)

## License

MIT © [thealphamerc](https://github.com/thealphamerc)