Wondering what’s next for npm?Check out our public roadmap! »

    react-google-button
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.2 • Public • Published

    react-google-button

    NPM version Build Status Coverage License Code Style

    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:

      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.

    Install

    npm i react-google-button

    DownloadsWeekly Downloads

    9,522

    Version

    0.7.2

    License

    MIT

    Unpacked Size

    136 kB

    Total Files

    25

    Last publish

    Collaborators

    • avatar