🔖 Release v1.0.0

TheAlphamerc · Aug 20, 2022 · e916118 · e916118
1 parent cc0daab
commit e916118
Show file tree

Hide file tree

Showing 6 changed files with 183 additions and 92 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,3 @@
+[1.0.0]
+
+- Initial release
diff --git a/README.md b/README.md
@@ -1,9 +1,13 @@
 # unsplash-image-picker
 
-> Provide component to search and choose image from unsplash images
+Provide component to search and choose image from unsplash images
 
 [![NPM](https://img.shields.io/npm/v/unsplash-image-picker.svg)](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
+
+[Demo](https://thealphamerc.github.io/unsplash-image-picker/)
+
 ## Install
 
 ```bash
@@ -12,14 +16,22 @@ 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 { UnsplashImagePicker } from 'unsplash-image-picker'
+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, setActivePhotos] = React.useState<>([])
   return (
     <div>
       <button
@@ -29,10 +41,17 @@ const App = () => {
       >
         Show Picker
       </button>
-      <UnsplashImagePicker
+      <UnsplashImagePickerModal
         unsplashAccessKey={unsplashAccessKey}
         active={active}
         setActive={setActive}
+        initialPhotoSearchQuery=''
+        onPhotoSelect={(photo: any) => {
+          let list = (photos ?? []) as any[]
+          list.push(photo)
+          setActivePhotos(list)
+          setActive(false)
+        }}
       />
     </div>
   )
@@ -67,6 +86,8 @@ const App = () => {
 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)
diff --git a/dist/api/unsplash-api.d.ts b/dist/api/unsplash-api.d.ts
@@ -48,7 +48,7 @@ declare const unsplashApi: (accessKey: string) => {
             query: string;
         } & Pick<import("unsplash-js/dist/types/request").PaginationParams, "page" | "perPage"> & import("unsplash-js/dist/types/request").OrientationParam & {
             orderBy?: "relevant" | "latest" | undefined;
-            color?: "black" | "blue" | "green" | "magenta" | "orange" | "purple" | "red" | "teal" | "white" | "yellow" | "black_and_white" | undefined;
+            color?: "white" | "black" | "yellow" | "orange" | "red" | "purple" | "magenta" | "green" | "teal" | "blue" | "black_and_white" | undefined;
             lang?: import("unsplash-js").Language | undefined;
             contentFilter?: "high" | "low" | undefined;
             collectionIds?: string[] | undefined;