react-google-signin-button

"Sign in with Google" button for React. Follows the official guidelines. Note that this module does not provide authentication itself; it only offers a button.

Installation

$ npm install react-google-signin-button

Usage

Import GoogleButton component and required CSS file.

import GoogleButton from 'react-google-signin-button';
import 'react-google-signin-button/dist/button.css';

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

Why are the styles in external CSS file and not as inline styles?

Using an external CSS file allows you to make small adjustments by adding your own CSS. Pseudo-classes :active and :focus cannot be used with inline styles without adding NPM dependencies.

Props

Name	Type	Default Value	Description
label	string	Sign in with Google	Text in the button. See Google documentation.
theme	string	light	light, dark or neutral
shape	string	rectangular	rectangular, pill, square or circle. Use square or circle when you want the logo only.
size	string	md	lg, md, or sm
logoAlign	string	left	When using custom width, the logo can be aligned with this. left or center

Other props are passed to the button element, such as:

• onClick
• disabled
• className
• style

Development

$ npm run rollup

This builds files under dist/ directory.