react-google-button

Simple Google sign in button for React that follows Google's style guidelines (https://developers.google.com/identity/sign-in/web/build-button)

Codepen Demo

Rendered Preview

Getting Started

react-google-button is universal, so it can be used client-side or server-side.

1. Install through: npm install --save react-google-button

2. Import GoogleButton from react-google-button:

   importGoogleButtonfrom'react-google-button'

3. Use GoogleButton component:

   <GoogleButtononClick={()=>{console.log('Google button clicked')}}/>

Props

type

PropType

oneOf(['light','dark'])

Default

'dark'

Example

<GoogleButtontype="light"// can also be written as disabled={true} for clarityonClick={()=>{console.log('Google button clicked')}}/>

Description

'light' or 'dark' for the different google styles (defaults to dark)

disabled

disabled - whether or not button is disabled

PropType

Boolean

Default

false

Example

<GoogleButtondisabled// can also be written as disabled={true} for clarityonClick={()=>{console.log('this will not run on click since it is disabled')}}/>

label

PropType

String

Default

'Sign in with Google'

Example

<GoogleButtonlabel='Be Cool'onClick={()=>{console.log('Google button clicked')}}/>

Description

Override the 'Sign in with Google' words with another string.

Note: Google's branding guidelines states you should not to do this

Builds

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:

<scriptsrc="../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.