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

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

or

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

Demo

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

Playground

• React
• Vue
• Solid JS
• Svelte

Usage with Libraries/Framework

React

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

 <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

 <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

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;

License

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