@mohalla-tech/google-image-picker

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.