{"id":15484389,"url":"https://github.com/thealphamerc/unsplash-image-picker","last_synced_at":"2025-08-16T06:32:20.249Z","repository":{"id":56874865,"uuid":"526094095","full_name":"TheAlphamerc/unsplash-image-picker","owner":"TheAlphamerc","description":"React library to search and select photos from Unsplash ","archived":false,"fork":false,"pushed_at":"2022-09-24T14:10:48.000Z","size":1127,"stargazers_count":19,"open_issues_count":2,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-09T18:18:35.489Z","etag":null,"topics":["image-picker-library","photos","picker","react","unsplash-api","unsplash-photos"],"latest_commit_sha":null,"homepage":"https://thealphamerc.github.io/unsplash-image-picker/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheAlphamerc.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-18T06:58:25.000Z","updated_at":"2025-05-19T12:45:27.000Z","dependencies_parsed_at":"2022-08-20T10:11:12.842Z","dependency_job_id":null,"html_url":"https://github.com/TheAlphamerc/unsplash-image-picker","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/TheAlphamerc/unsplash-image-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheAlphamerc%2Funsplash-image-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheAlphamerc%2Funsplash-image-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheAlphamerc%2Funsplash-image-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheAlphamerc%2Funsplash-image-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheAlphamerc","download_url":"https://codeload.github.com/TheAlphamerc/unsplash-image-picker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheAlphamerc%2Funsplash-image-picker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270677652,"owners_count":24626805,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-16T02:00:11.002Z","response_time":91,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image-picker-library","photos","picker","react","unsplash-api","unsplash-photos"],"created_at":"2024-10-02T05:40:33.697Z","updated_at":"2025-08-16T06:32:19.908Z","avatar_url":"https://github.com/TheAlphamerc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# unsplash-image-picker\n\nProvide component to search and choose image from unsplash images\n\n[![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\u0026count_bg=%2379C83D\u0026title_bg=%23555555\u0026icon=\u0026icon_color=%23E7E7E7\u0026title=hits\u0026edge_flat=false)](https://hits.seeyoufarm.com)\n\n## Live Demo\n\n[Live Demo](https://thealphamerc.github.io/unsplash-image-picker/) [Code Sandbox](https://codesandbox.io/s/unsplash-image-picker-example-c7jzs1?file=/src/App.js)\n\n## Install\n\n```bash\nnpm install --save unsplash-image-picker\n```\n\n## Usage\n\nPackage provide 2 component to search and choose image from unsplash images.\n\n- `UnsplashImagePicker` - search and choose image from unsplash images\n- `UnsplashImagePickerModal` - Display modal to search and choose image from unsplash images\n\n### How to use UnsplashImagePickerModal\n\n```tsx\nimport React, { Component } from 'react'\nimport UnsplashImagePickerModal from 'unsplash-image-picker'\nimport 'unsplash-image-picker/dist/index.css'\n\nconst App = () =\u003e {\n  const [active, setActive] = React.useState(false)\n  const unsplashAccessKey = 'UNSPLASH_ACCESS_KEY'\n  const [photos, SetPhotos] = React.useState([])\n  return (\n    \u003cdiv\u003e\n      \u003cbutton\n        onClick={() =\u003e {\n          setActive(true)\n        }}\n      \u003e\n        Show Picker\n      \u003c/button\u003e\n      \u003cUnsplashImagePickerModal\n        unsplashAccessKey={unsplashAccessKey}\n        active={active}\n        setActive={setActive}\n        initialPhotoSearchQuery=''\n        onPhotoSelect={(photo) =\u003e {\n          let list = photos ?? []\n          list.push(photo)\n          SetPhotos(list)\n          setActive(false)\n        }}\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### How to use UnSplashImagePicker\n\n```tsx\nimport React from 'react'\nimport 'unsplash-image-picker/dist/index.css'\nimport { UnSplashImagePicker } from 'unsplash-image-picker'\n\nconst App = () =\u003e {\n  const [photos, setPhotos] = React.useState([])\n  const unsplashAccessKey = 'UNSPLASH_ACCESS_KEY'\n  return (\n    \u003cdiv className='App '\u003e\n      \u003cUnSplashImagePicker\n        unsplashAccessKey={unsplashAccessKey}\n        initialPhotoSearchQuery=''\n        onPhotoSelect={(photo) =\u003e {\n          let list = photos ?? []\n          list.push(photo)\n          SetPhotos(list)\n        }}\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\n\u003e To get UNSPLASH ACCESS KEY, you can register at [unsplash.com](https://unsplash.com/join)\n\n## License\n\nMIT © [thealphamerc](https://github.com/thealphamerc)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthealphamerc%2Funsplash-image-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthealphamerc%2Funsplash-image-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthealphamerc%2Funsplash-image-picker/lists"}