{"id":13868,"library":"react-google-button","title":"React Google Button","description":"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.","status":"active","version":"0.8.0","language":"javascript","source_language":"en","source_url":"https://github.com/prescottprue/react-google-button","tags":["javascript","react","google","button","authentication","typescript"],"install":[{"cmd":"npm install react-google-button","lang":"bash","label":"npm"},{"cmd":"yarn add react-google-button","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-google-button","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for React component functionality.","package":"react","optional":false}],"imports":[{"note":"The component is exported as a default export.","wrong":"import { GoogleButton } from 'react-google-button'","symbol":"GoogleButton","correct":"import GoogleButton from 'react-google-button'"},{"note":"For CommonJS environments, the default export is assigned directly.","wrong":"const { GoogleButton } = require('react-google-button')","symbol":"GoogleButton","correct":"const GoogleButton = require('react-google-button')"},{"note":"TypeScript type for the component's props.","symbol":"GoogleButtonProps","correct":"import type { GoogleButtonProps } from 'react-google-button'"}],"quickstart":{"code":"import React from 'react';\nimport GoogleButton from 'react-google-button';\n\nfunction MySignInPage() {\n  const handleGoogleSignIn = () => {\n    console.log('Google button clicked. Initiate Google Sign-In flow.');\n    // In a real application, you would typically redirect to Google's OAuth endpoint\n    // or use a library like react-google-login or @react-oauth/google.\n    // For demonstration, we'll just log.\n    alert('Imagine Google Sign-In popup opening now!');\n  };\n\n  return (\n    <div>\n      <h1>Sign In to My App</h1>\n      <GoogleButton\n        type=\"dark\" // or \"light\"\n        onClick={handleGoogleSignIn}\n      />\n      <p>Click the button to sign in with your Google account.</p>\n    </div>\n  );\n}\n\nexport default MySignInPage;\n","lang":"typescript","description":"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."},"warnings":[{"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`.","message":"The 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.","severity":"breaking","affected_versions":">=0.8.0"},{"fix":"Avoid using the `label` prop to override the default text unless absolutely necessary and you understand the implications for Google's branding.","message":"Customizing the button's 'label' prop to anything other than 'Sign in with Google' is explicitly against Google's branding guidelines and is generally discouraged.","severity":"gotcha","affected_versions":">=0.5.0"},{"fix":"Always access the component using `window.ReactGoogleButton` for UMD builds. Verify the global variable name in your specific build if encountering 'undefined' errors.","message":"When 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.","severity":"gotcha","affected_versions":">=0.5.0"},{"fix":"Always use the default import syntax: `import GoogleButton from 'react-google-button'`.","message":"The 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.","severity":"gotcha","affected_versions":">=0.5.0"}],"env_vars":null,"search_vec":"'0.8.0':40 '2024':43 'adher':23,83 'also':116 'authent':99,129 'brand':28 'browser':122 'build':119 'button':3,7,22,128 'cadenc':53 'commonj':113 'compat':56 'compon':11 'current':36 'develop':70 'differenti':77 'direct':121 'drop':93 'drop-in':92 'effort':103 'enhanc':61 'environ':110 'esm':108 'experi':71 'featur':60 'focus':54 'googl':2,6,18,25,85,98,127 'guidelin':31,88 'ident':33 'integr':97 'javascript':125 'maintain':46 'make':89 'manual':101 'minor':59 'modern':107 'modul':109 'offer':67,117 'offici':27 'older':112 'packag':45 'pre':16 'pre-styl':15 'primari':76 'provid':13 'rapid':51 'react':1,5,10,126 'react-google-button':4 'releas':41,52 'robust':69 'script':123 'setup':114 'ship':63 'sign':20 'sign-in':19 'simplic':80 'solut':34,95 'stabl':37 'steadi':48 'strict':82 'style':17,30,102 'support':105 'type':66 'typescript':65,73,130 'umd':118 'updat':57 'usag':124 'user':74 'version':38 'visual':87 'without':100","created_at":"2026-04-20T01:56:43.900383+00:00","updated_at":"2026-04-20T01:56:43.900383+00:00","problems":[{"fix":"For CommonJS, use `const GoogleButton = require('react-google-button')`. Ensure your tooling correctly handles ESM default exports if you are transpiling.","cause":"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.","error":"TypeError: (0 , _reactGoogleButton.default) is not a function"},{"fix":"Change your import statement to `import GoogleButton from 'react-google-button'`. If using CommonJS, use `const GoogleButton = require('react-google-button')`.","cause":"The `GoogleButton` component variable is `undefined`, likely due to an incorrect import statement (e.g., using named import for a default export).","error":"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."},{"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.","cause":"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+.","error":"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."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/prescottprue/react-google-button","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-google-button","openapi_spec":null,"status_page":null,"smithery":null,"categories":["auth-security","web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}