react-google-button

[![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]

> 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

!Preview Image

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:

``javascript
import GoogleButton from 'react-google-button'
`

3. Use GoogleButton component:

`javascript
onClick={() => { console.log('Google button clicked') }}
/>
`

Props

$3


##### PropType
`js
oneOf([ 'light', 'dark' ])
`

##### Default
`js
'dark'
`

##### Example

`js
type="light" // can be light or dark
onClick={() => { console.log('Google button clicked') }}
/>
`

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




$3


disabled - whether or not button is disabled

##### PropType
`js
Boolean
`

##### Default
`js
false
`

##### Example

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

$3


##### PropType
`js
String
`
##### Default
`js
'Sign in with Google'
`

##### Example

`javascript
label='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


``

Note: In an effort to keep things simple, the wording from this explanation was modeled after the installation section of the Redux Docs.

[npm-image]: https://img.shields.io/npm/v/react-google-button.svg?style=flat-square
[npm-url]: https://npmjs.org/package/react-google-button
[build-status-image]: https://img.shields.io/github/workflow/status/prescottprue/react-google-button/NPM%20Package%20Publish?style=flat-square&logo=github
[build-status-url]: https://github.com/prescottprue/react-google-button/actions
[coverage-image]: https://img.shields.io/codeclimate/coverage/github/prescottprue/react-google-button.svg?style=flat-square&logo=codecov
[coverage-url]: https://codeclimate.com/github/prescottprue/react-google-button
[license-image]: https://img.shields.io/npm/l/react-google-button.svg?style=flat-square
[license-url]: https://github.com/prescottprue/react-google-button/blob/master/LICENSE
[code-style-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[code-style-url]: http://standardjs.com/