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

1.0.1 • 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

  • 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


Playground


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.

Readme

Keywords

none

Package Sidebar

Install

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

Weekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

230 kB

Total Files

20

Last publish

Collaborators

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