prescottprue / react-google-button

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

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:

   import GoogleButton from 'react-google-button'

3. Use GoogleButton component:

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

Props

type

PropType

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

Default

'dark'

Example

<GoogleButton
  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)

disabled

disabled - whether or not button is disabled

PropType

Boolean

Default

false

Example

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

label

PropType

String

Default

'Sign in with Google'

Example

<GoogleButton
  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 <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.

react-google-button's Issues

bug(react-native): view config not found for name feOffset

Hi Prescott!
I really like the work you did here; but i'm having troubles using it.

I'm constantly getting the error "View config not found for name feOffset".
It might be my lack of skill or something that i'm missing.

This is a screenshot of the error:

And this is the code i'm trying to run (it used to be larger than this but i started to short it down just to make sure it wasn't my code):

import React, { Component } from "react";
import GoogleButton from 'react-google-button';

class SelectionScreen extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <GoogleButton
                onClick={() => { console.log('Google button clicked') }}
            />
        );
    }
}

export default SelectionScreen;

I'm not sure if listing the version of my dependencies is any useful, but i will list them just in case:

react-native 0.53
react navigation 1.5.12
react 16.2
and native-base 2.4.3

App was running on an android emulator; every other screen works fine.

Any help would be highly appreciated

Jest is unable to find module 'react-google-button'

Do you want to request a feature or report a bug?
I want to report a bug

What is the current behavior?
When I run jest i get the following Jest is unable to find module 'react-google-button'

What is the expected behavior?
The package should not break jest tests

Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
Jest 4.2.4. Create react app with typescript

Steps to reproduce and if possible a minimal demo of the problem via codepen or similar.
You can reproduce the error by cloning this repo: https://github.com/kaladivo/jest-error
then run yarn install && yarn test.

See this question on stackoverflow https://stackoverflow.com/questions/60024292/jest-is-unable-to-find-module-from-test-file/60025441#60025441. This seems to be caused by many reasons, one of which seems to be using newer import syntax. I am not sure how to fix this (otherwise I would made a PR), but maybe someone else can... It would be great if this module wont break the tests...

Resize google icon

Is there a way to resize the google icon in the button. Now if I change the height of the button it doesn't change the height of the icon. I need to resize it because the MS button svg (which I use because there isn't really a package that creates a button like this repo does) is 42 in height, where the google button is 50 in height.

A `main` module field that could not be resolved

Hi,

I've got an error on compiling my app :

While trying to resolve module react-google-button from file /var/www/apps/BUM-P/Bump/Components/Search.js, the package /var/www/apps/BUM-P/Bump/node_modules/react-google-button/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/var/www/apps/BUM-P/Bump/node_modules/react-google-button/lib/index.js

I don't have directory named lib in the react-google-button dir, just a "src" dir.

Is it a bug ?

Publish Typescript types

Please publish index.d.ts so typescript doesn't complain.

feat(core): keyboard accessibility support (on by default)

Hello, I think it would be great if this button was accessible using the keyboard. This can be achieved by adding tabindex="0" and role="button" to the wrapper <div> tag that has click listener attached to it.

The element receiving the click event should be a button element instead of a div

Do you want to request a feature or report a bug?
bug

What is the current behavior?
When using the component in playwright e2e test, the google login popup never opens in headless mode.

What is the expected behavior?
Playwright can nicely work with popups opened from the page when they are initiated correctly.
Running end to end tests with playwright should open popups when this google button is pressed.

Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?

Steps to reproduce and if possible a minimal demo of the problem via codepen or similar.
Following repo is created containing:

• a react app with some login pages. Each page just has a login button.
• a playwright end to end test package containing tests to see if the login buttons correctly open the login popup

https://github.com/thdk/playwright-headless-popup

If this package is still maintained I can submit a PR containing a fix for this.

Support for defaultProps will be removed from function components in a future major release

bug?*
I downloaded react-google-button just as it was said:
npm install --save react-google-button
and used it just like it was said:

import GoogleButton from 'react-google-button'

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

It gives red warning:
Warning: GoogleIcon: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
using Typescript/Next.js

Responsive

What about making it responsive?
Is it possible?

Size

Hey! I was just wondering how can you change the size of the button?

jsnext:main

Hello there, thanks for this awesome package.

Webpack get's confused when loading react-google-button because it tries to parse the jsnext:main entrypoint but does not know how to handle export default from ..., class variables and JSX.

Shouldn't jsnext:main only contain ES2015 code?

feat: ability to customize styling

I request to add customize options in the google button so we can use it as per our UI requirements.

currently it does not support css properties which makes it unable to customize.

Please add ways which we can use to customize the google button

ES6 eslint error

If I do: yarn add https://github.com/prescottprue/react-google-button#v0.5.2

I get the error:
Invalid "trailingComma" value. Expected "all", "es5" or "none", but received "es6".