Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-google-button
Advanced tools
Readme
Simple Google sign in button for React that follows Google's style guidelines (https://developers.google.com/identity/sign-in/web/build-button)
react-google-button
is universal, so it can be used client-side or server-side.
Install through: npm install --save react-google-button
Import GoogleButton
from react-google-button
:
import GoogleButton from 'react-google-button'
Use GoogleButton
component:
<GoogleButton
onClick={() => { console.log('Google button clicked') }}
/>
oneOf([ 'light', 'dark' ])
'dark'
<GoogleButton
type="light" // can be light or dark
onClick={() => { console.log('Google button clicked') }}
/>
'light'
or 'dark'
for the different google styles (defaults to dark
)
disabled
- whether or not button is disabled
Boolean
false
<GoogleButton
disabled // can also be written as disabled={true} for clarity
onClick={() => { console.log('this will not run on click since it is disabled') }}
/>
String
'Sign in with Google'
<GoogleButton
label='Be Cool'
onClick={() => { console.log('Google button clicked') }}
/>
Override the 'Sign in with Google' words with another string.
Note: Google's branding guidelines states you should not to do this
Most commonly people consume react-google-button
as a CommonJS module. This module is what you get when you import redux in a Webpack, Browserify, or a Node environment.
If you don't use a module bundler, it's also fine. The react-google-button
npm package includes precompiled production and development UMD builds in the dist folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. For example, you can drop a UMD build as a <script>
tag on the page. The UMD builds make Redux Firestore available as a window.ReduxFirestore
global variable.
It can be imported like so:
<script src="../node_modules/react-google-button/dist/react-google-button.min.js"></script>
<!-- or through cdn: <script src="https://unpkg.com/react-google-button@latest/dist/react-google-button.min.js"></script> -->
<script>console.log('redux firestore:', window.ReactGoogleButton)</script>
Note: In an effort to keep things simple, the wording from this explanation was modeled after the installation section of the Redux Docs.
FAQs
[![NPM version][npm-image]][npm-url] [![Build Status][build-status-image]][build-status-url] [![Coverage][coverage-image]][coverage-url] [![License][license-image]][license-url] [![Code Style][code-style-image]][code-style-url]
The npm package react-google-button receives a total of 30,542 weekly downloads. As such, react-google-button popularity was classified as popular.
We found that react-google-button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.