Nightly Procrastination Machine

    @mohalla-tech/google-image-picker
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    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



    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.

    Keywords

    none

    Install

    npm i @mohalla-tech/google-image-picker

    DownloadsWeekly Downloads

    34

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    230 kB

    Total Files

    20

    Last publish

    Collaborators

    • kiranjavvajisc
    • vinodsai-a
    • amit_shukla
    • aloksingh3112
    • ashutoshtanwar
    • shivani-sehgal
    • ashishkothari
    • hdwivedi9
    • prarabdhb
    • shivamrr9
    • saketdiwakar
    • mohalla-tech-web
    • webos002
    • saurabhranjan
    • bhupali-sharechat