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
- Add a div
<div id='gcse-wrapper'></div>
in your html where you want to use google-image-picker - 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
- 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.