Registry / auth-security / react-google-button

react-google-button

library0.8.0jsnpmunverified

react-google-button is a React component that provides a pre-styled Google Sign-In button, adhering to Google's official branding and style guidelines for identity solutions. The current stable version is 0.8.0, released in 2024. The package maintains a steady but not rapid release cadence, focusing on compatibility updates and minor feature enhancements. It ships with TypeScript types, offering a robust development experience for TypeScript users. Its primary differentiator is its simplicity and strict adherence to Google's visual guidelines, making it a drop-in solution for integrating Google authentication without manual styling efforts. It supports both modern ESM module environments and older CommonJS setups, and also offers UMD builds for direct browser script usage.

auth-security web-framework

npm install react-google-button

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-GOOGLE-BUTTO

react-google-button

auth-securityjavascriptv0.8.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

GoogleButton

✓ import GoogleButton from 'react-google-button'

✗ import { GoogleButton } from 'react-google-button'

The component is exported as a default export.

GoogleButton

✓ const GoogleButton = require('react-google-button')

✗ const { GoogleButton } = require('react-google-button')

For CommonJS environments, the default export is assigned directly.

GoogleButtonProps

✓ import type { GoogleButtonProps } from 'react-google-button'

TypeScript type for the component's props.

This quickstart demonstrates how to import and render the GoogleButton component, providing a basic onClick handler to simulate a sign-in attempt. It highlights the primary usage pattern.

import React from 'react'; import GoogleButton from 'react-google-button'; function MySignInPage() { const handleGoogleSignIn = () => { console.log('Google button clicked. Initiate Google Sign-In flow.'); // In a real application, you would typically redirect to Google's OAuth endpoint // or use a library like react-google-login or @react-oauth/google. // For demonstration, we'll just log. alert('Imagine Google Sign-In popup opening now!'); }; return ( <div> <h1>Sign In to My App</h1> <GoogleButton type="dark" // or "light" onClick={handleGoogleSignIn} /> <p>Click the button to sign in with your Google account.</p> </div> ); } export default MySignInPage;

Debug

Known issues

breakingThe minimum required React version has been updated to 16.8.0 due to the migration of the component to a function component and removal of defaultProps. Projects using older React versions will encounter errors.

fix

Upgrade React and ReactDOM to version 16.8.0 or newer. `npm install react@^16.8.0 react-dom@^16.8.0` or `yarn add react@^16.8.0 react-dom@^16.8.0`.

affects: >=0.8.0

gotchaCustomizing the button's 'label' prop to anything other than 'Sign in with Google' is explicitly against Google's branding guidelines and is generally discouraged.

fix

Avoid using the `label` prop to override the default text unless absolutely necessary and you understand the implications for Google's branding.

affects: >=0.5.0

gotchaWhen using the UMD build via a `<script>` tag, the component is exposed globally as `window.ReactGoogleButton`. Be careful not to confuse this with other global variables or typo `ReduxFirestore` mentioned in an older README section.

fix

Always access the component using `window.ReactGoogleButton` for UMD builds. Verify the global variable name in your specific build if encountering 'undefined' errors.

affects: >=0.5.0

gotchaThe component is exported as a default export. Using named import syntax (e.g., `import { GoogleButton } from 'react-google-button'`) will result in `GoogleButton` being undefined.

fix

Always use the default import syntax: `import GoogleButton from 'react-google-button'`.

affects: >=0.5.0

Errors

Common errors & fixes

TypeError: (0 , _reactGoogleButton.default) is not a function

Attempting to use CommonJS `require` syntax (`require('react-google-button').default`) when the bundler or environment expects a direct CommonJS export or you are mixing CJS and ESM import styles incorrectly.

fix

For CommonJS, use `const GoogleButton = require('react-google-button')`. Ensure your tooling correctly handles ESM default exports if you are transpiling.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

The `GoogleButton` component variable is `undefined`, likely due to an incorrect import statement (e.g., using named import for a default export).

fix

Change your import statement to `import GoogleButton from 'react-google-button'`. If using CommonJS, use `const GoogleButton = require('react-google-button')`.

Invariant Violation: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=GoogleButton for the full message or use the non-minified dev environment for full errors. This error is likely caused by a React version mismatch.

This error, specifically 'Minified React error #31', indicates a React version incompatibility or multiple React instances. Given the breaking change in v0.8.0, it's often related to `react-google-button` requiring React 16.8+.

fix

Ensure that `react` and `react-dom` are installed at version `16.8.0` or higher in your project's dependencies, and that there are no duplicate React installations. Use `npm ls react` or `yarn why react` to inspect versions.

Upgrade

Version history

0.8.0latest on npm

Audit

Dependencies

reactrequiredRequired peer dependency for React component functionality.

Agent activity

17 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/prescottprue/react-google-button ↗

packagehttps://www.npmjs.com/package/react-google-button ↗