npm package: @mohalla-tech/google-image-picker
Description: Image Picker From Google Images
Author: Alok Singh
Latest version: 1.0.1

# Google Image Picker

Google image picker helps to directly upload the google search images from your application. It is written in typescript
and can be used with any js libraries/framework.

## Installation

```bash
npm install @mohalla-tech/google-image-picker --save
```

or

```bash
yarn add @mohalla-tech/google-image-picker
```

## Demo

<img src="https://public-media.driftvideo.com/videos-gifs/DRIFT-VIDEO-3507441-3612016-1670564176.gif" width="500" />

<br/>

## Geting Started

1. Add a div `<div id='gcse-wrapper'></div>` in your html where you want to use google-image-picker
2. Call `fetchGoogleCSEScript({callback,apiKey,filename})` when the dom mounted with an object argument consist of three property
   - callback function **(mandatory)**
   - apiKey string **(mandatory)**
   - fileName string **(optional)** if not provided then default value is image
3. Clicking any image as shown in demo will return an object `{ file: File; blob: string; };` in callback function.

## Access API Key

- `https://cse.google.com/cse.js?cx={ApiKey}` here the Api key is basically cx value

- You can access API Key by referring following link
  - [Programmable Search Engine](https://programmablesearchengine.google.com)

<br/>

## Playground

- [ React ](https://stackblitz.com/edit/react-1w4wkf?file=src/App.js)
- [ Vue ](https://stackblitz.com/edit/vue-fyjmav?file=src/App.vue)
- [Solid JS](https://stackblitz.com/edit/solidjs-templates-psy3he?file=src/App.jsx)
- [Svelte](https://stackblitz.com/edit/sveltejs-kit-template-default-dwwwzb?file=src/routes/+page.svelte)

<br/>

## Usage with Libraries/Framework

### React

```javascript
import { useEffect, useState } from 'react';
import { fetchGoogleCSEScript } from '@mohalla-tech/google-image-picker';

function App() {
  const [image, setImage] = useState(null);

  useEffect(() => {
    fetchGoogleCSEScript({
      callback: uploadImage,
      apiKey: 'a749032cf5',
      fileNmae: 'notification',
    });
  }, []);

  const uploadImage = ({ file, blob }) => {
    setImage(blob);
  };
  return (
    <div>
      <div id="gcse-wrapper"></div>
      <img width="300" height="300" src={image} alt="" />
    </div>
  );
}

export default App;
```

### Vue

```javascript
 <template>
  <div id="app">
    <div id="gcse-wrapper"></div>
    <img width="300" height="300" :src="image" alt="" />
  </div>
</template>

<script>
import { fetchGoogleCSEScript } from "@mohalla-tech/google-image-picker";

export default {
  name: "App",
  data() {
    return {
      image: null,
    };
  },
  mounted() {
    fetchGoogleCSEScript({
      callback: this.uploadImage,
      apiKey: "a749032cf5",
      fileName: "notification",
    });
  },
  methods: {
    uploadImage({ file, blob }) {
      this.image = blob;
    },
  },
};
</script>

<style></style>
```

### Svelte

```javascript
 <script>
  import { onMount } from "svelte";
  import { fetchGoogleCSEScript } from "@mohalla-tech/google-image-picker";
  let image = null;
  const uploadImage = ({ file, blob }) => {
    image = blob;
  };
  onMount(() => {
    fetchGoogleCSEScript({
      callback: uploadImage,
      apiKey: "a749032cf5",
      fileName: "notification",
    });
  });
</script>

<main>
  <div id="gcse-wrapper" />
  <img width="300" height="300" src={image} alt="" />
</main>

<style>
</style>
```

### Solid JS

```javascript
import { onMount, createSignal } from 'solid-js';
import { fetchGoogleCSEScript } from '@mohalla-tech/google-image-picker';

function App() {
  const [image, setImage] = createSignal(null);

  onMount(() => {
    fetchGoogleCSEScript({
      callback: uploadImage,
      apiKey: 'a749032cf5',
      fileName: 'notification',
    });
  });
  const uploadImage = ({ file, blob }) => {
    setImage(blob);
  };

  return (
    <div>
      <div id="gcse-wrapper"></div>
      <img width="300" height="300" src={image()} alt="" />
    </div>
  );
}

export default App;
```

<br/>

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details.