Apply some changes from feedback

.gitignore

@@ -1,2 +1,4 @@
 node_modules/
 build/
+.history/
+.vscode/

README.md

@@ -18,14 +18,17 @@ yarn add @syndicode/react-algolia-places
 ## Usage
 
 ```jsx
+const placesAppId = process.env.REACT_APP_ALGOLIA_PLACES_APP_ID;
+const placesApiKey = process.env.REACT_APP_ALGOLIA_PLACES_API_KEY;
+const searchClient = algoliasearch.initPlaces(placesAppId, placesApiKey);
+
+...
+
 <AlgoliaPlaces
   defaultValue={defaultValue}
-  apiKey={process.env.REACT_APP_ALGOLIA_PLACES_API_KEY}
-  appId={process.env.REACT_APP_ALGOLIA_PLACES_APP_ID}
-  onSelect={objectID => {
-    console.log(objectID);
-  }}
+  onSelect={objectID => { console.log(objectID) }}
   searchParams={searchParams}
+  searchClient={searchClient}
 >
   {({ clear, error, loading, options, getInputProps, getOptionProps }) => (
     <>
@@ -34,36 +37,39 @@ yarn add @syndicode/react-algolia-places
         {options &&
           options.map(option => {
             // NOTE: you have to pass the option down to the getOptionProps() method
-            return <li {...getOptionProps(option)} key={option.objectID}>{option.city}</li>;
+            return (
+              <li {...getOptionProps(option)} key={option.objectID}>
+                {option.city}
+              </li>
+            );
           })}
       </ul>
     </>
   )}
-</AlgoliaPlaces>
+</AlgoliaPlaces>;
 ```
 
 ### Component's props
 
 ```
-apiKey: String
-appId: String # Your algolia's app apiKey and appId
-defaultValue: String # Pass down objectID to prefetch result and fill in the input
-onSelect(objectID: String, option: Option): String #
-searchParams: searchParams
-render | children - render prop
-formatInputValue(hit: Hit): String - redefine default transformer for the inputs value on option select
-hitTransformer(hit: Hit): Option - redefine default transformer for formatted option
+**`defaultValue: String`** - Pass down a `objectID` to prefetch result and render the stored value
+**`formatInputValue(hit: Hit): String`** - redefine default transformer for the inputs value on option select
+**`onSelect(objectID: String, option: Option)`** - onselect callback
+**`render`** | **`children`** - render prop
+**`searchClient`** - initiated algoliasearch client
+**`searchParams: searchParams`** - algoliasearch client search options
+**`transformItems(hit: Hit): Option`** - redefine default transformer for formatted option
 ```
 
 ### Render props parameters
 
 ```
-clear() - change selected value to `null`, reset all search results
-error: Object -
-getInputProps() - method that creates props object to pass onto input element
-getOptionProps(option: Option) - method that creates props object to pass onto option component
-loading: Boolean - whether search request is in progress
-options: [Option] - list of formatted algolia places search results
+**`clear()`** - change selected value to `null`, reset all search results
+**`error: Object`** - search request error object
+**`getInputProps()`** - method that creates props object to pass onto input element
+**`getOptionProps(option: Option)`** - method that creates props object to pass onto option component
+**`loading: Boolean`** - whether search request is in progress
+**`options: [Option]`** - list of formatted algolia places search results
 ```
 
 ### Types
@@ -79,7 +85,7 @@ type Option {
 }
 ```
 
-See algolia docs for more info
+See algolia docs for more info:
 
-- search params options - https://community.algolia.com/places/api-clients.html#search-parameters
-- hit's shape - https://community.algolia.com/places/api-clients.html#json-answer
+- **`searchParams`** options - https://community.algolia.com/places/api-clients.html#search-parameters
+- **`Hit`**'s shape - https://community.algolia.com/places/api-clients.html#json-answer

src/index.js

@@ -1,31 +1,23 @@
 import { useEffect, useState, useMemo } from "react";
-import algoliasearch from "algoliasearch";
 
 import {
   transformHit,
-  formatInputValue as defaultFormatInputValue,
+  formatInputValue as defaultFormatInputValue
 } from "./utils";
 
 const noop = () => {};
 
 const AlgoliaPlaces = ({
-  apiKey,
-  appId,
   children,
   defaultValue,
   formatInputValue = defaultFormatInputValue,
-  hitTransformer = transformHit,
   onSelect = noop,
   render,
+  searchClient,
   searchParams,
+  transformItems = transformHit
 }) => {
-  // Setup algoliasearch placesClient client
-  const placesClient = useMemo(() => algoliasearch.initPlaces(appId, apiKey), [
-    appId,
-    apiKey,
-  ]);
-  const searchPlace = query => placesClient.search(query, searchParams);
-
+  const searchPlace = query => searchClient.search(query, searchParams);
   // Setup hooks
   const [error, setError] = useState(null);
   const [inputValue, setInputValue] = useState("");
@@ -40,7 +32,7 @@ const AlgoliaPlaces = ({
       getPlaceObject(defaultValue)
         .then(result => {
           setLoading(false);
-          const { city, country } = hitTransformer(result);
+          const { city, country } = transformItems(result);
           setInputValue(formatInputValue(city, country));
         })
         .catch(error => {
@@ -55,9 +47,9 @@ const AlgoliaPlaces = ({
   }, [
     defaultValue,
     formatInputValue,
-    hitTransformer,
+    transformItems,
     placesClient,
-    searchParams,
+    searchParams
   ]);
 
   const clear = () => {
@@ -83,30 +75,29 @@ const AlgoliaPlaces = ({
             searchPlace(query)
               .then(results => {
                 setLoading(false);
-                const optionsList = results.hits.map(hitTransformer);
+                const optionsList = results.hits.map(transformItems);
                 setOptions(optionsList);
               })
               .catch(error => {
                 setLoading(false);
                 setError(error);
               });
           }
-        },
+        }
       };
     },
     getOptionProps(option) {
       const { city, country, objectID } = option;
-
       return {
         title: option.formatted,
         disabled: loading,
         onClick() {
           setOptions(null);
           setInputValue(formatInputValue(city, country));
           onSelect(objectID, option);
-        },
+        }
       };
-    },
+    }
   });
 };