
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
react-google-contacts
Advanced tools
A Google Button to import user's gmail contacts
npm install react-google-contacts
import React from 'react';
import ReactDOM from 'react-dom';
import GoogleContacts from 'react-google-contacts';
const responseCallback = (response) => {
console.log(response);
}
ReactDOM.render(
<GoogleContacts
clientId="429632624144-40js6mbas4r3tmjursoco68eoum0a24v.apps.googleusercontent.com"
buttonText="Import"
onSuccess={responseCallback}
onFailure={responseCallback}
/>,
document.getElementById('googleButton')
);
ReactDOM.render(
<GoogleContacts
clientId="429632624144-40js6mbas4r3tmjursoco68eoum0a24v.apps.googleusercontent.com"
render={renderProps => (
<button onClick={renderProps.onClick}>This is my custom Google button</button>
)}
buttonText="Import"
onSuccess={responseCallback}
onFailure={responseCallback}
/>,
document.getElementById('googleButton')
);
If responseType is not 'code', callback will return an array of objects (contacts).
If responseType is 'code', callback will return the offline token for use on your server.
If you use the hostedDomain param, make sure to validate the id_token (a JSON web token) returned by Google on your backend server:
responseGoogle(response) {...}
callback function, you should get back a standard JWT located at response.hg.id_token
Authorization
header)https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=YOUR_TOKEN_HERE
hd
key equal to the hosted domain you'd like to restrict to.params | value | default value | description |
---|---|---|---|
clientId | string | REQUIRED | |
jsSrc | string | - | |
maxResults | number | 999 | By passing a number here you can restrict how many results you want to return |
hostedDomain | string | - | URL of the Javascript file normally hosted by Google |
responseType | string | permission | Can be either space-delimited 'id_token', to retrieve an ID Token + 'permission' (or 'token'), to retrieve an Access Token, or 'code', to retrieve an Authorization Code. |
accessType | string | online | Can be either 'online' or 'offline'. Use offline with responseType 'code' to retrieve a refresh token |
onSuccess | function | REQUIRED | |
onFailure | function | REQUIRED | |
onRequest | function | - | |
buttonText | string | Import from Gmail | |
className | string | - | |
style | object | - | |
disabledStyle | object | - | |
loginHint | string | - | |
prompt | string | - | |
tag | string | button | sets element tag (div, a, span, etc |
type | string | button | sets button type (submit |
disabled | boolean | false | |
discoveryDocs | - | https://developers.google.com/discovery/v1/using | |
uxMode | string | popup | The UX mode to use for the sign-in flow. Valid values are popup and redirect. |
theme | string | light | If set to dark the button will follow the Google brand guidelines for dark. Otherwise it will default to light (https://developers.google.com/identity/branding-guidelines) |
icon | boolean | true | Show (true ) or hide (false ) the Google Icon |
redirectUri | string | - | If using ux_mode='redirect', this parameter allows you to override the default redirect_uri that will be used at the end of the consent flow. The default redirect_uri is the current URL stripped of query parameters and hash fragment. |
render | function | - | Render prop to use a custom element, use renderProps.onClick |
onSuccess callback returns an array of objects (contacts).
property name | value | definition |
---|---|---|
title | string | First Name and Last Name |
string | ||
phoneNumber | string | Phone Number |
property name | value | definition |
---|---|---|
code | object | offline token |
You can also pass child components such as icons into the button component.
<GoogleContacts
clientId={'429632624144-40js6mbas4r3tmjursoco68eoum0a24v.apps.googleusercontent.com'}
onSuccess={responseCallback}
onFailure={responseCallback}
>
<FontAwesome
name='google'
/>
<span> Import from Gmail</span>
</GoogleContacts>
onFailure callback is called when either initialization or a signin attempt fails.
property name | value | definition |
---|---|---|
error | string | Error code |
details | string | Detailed error description |
Common error codes include:
error code | description |
---|---|
idpiframe_initialization_failed | initialization of the Google Auth API failed (this will occur if a client doesn't have third party cookies enabled) |
popup_closed_by_user | The user closed the popup before finishing the sign in flow. |
access_denied | The user denied the permission to the scopes required |
immediate_failed | No user could be automatically selected without prompting the consent flow. |
More details can be found in the official Google docs:
npm run start
Default dev server runs at localost:8080 in browser. You can set IP and PORT in webpack.config.dev.js
npm run test:watch
npm run bundle
Based on the amazing work of @anthonyjgrove: https://github.com/anthonyjgrove/react-google-login
2.0.0
FAQs
A Google Button to import user's gmail contacts
The npm package react-google-contacts receives a total of 54 weekly downloads. As such, react-google-contacts popularity was classified as not popular.
We found that react-google-contacts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.