@dougrich/react-signin-google

react-signin-google

React component for a sign in button styled according to google brand guidelines

Branding guidelines found here: https://developers.google.com/identity/branding-guidelines

This does:

• provide a button that can be placed anywhere (see positioning guidelines in branding document)
• button can either by a button tag or an a tag: see usage below
• provide a button style that renders a link to include roboto font for sign in (see advanced usage below)

This does not:

• provide any OAuth hooks or means to actually sign in (just the UX)

Install

npm install --save @dougrich/react-signin-google

Usage

Simple

import React, { Component } from 'react'

import SignInButton from '@dougrich/react-signin-google'

class Example extends Component {
  render () {
    return (
      <SignInButton onClick={...} />
    )
  }
}

Only Light/Dark

// light button
import SignInButton from '@dougrich/react-signin-google/dist/light'
// dark button
import SignInButton from '@dougrich/react-signin-google/dist/dark'

As Link

import React, { Component } from 'react'

import SignInButton from '@dougrich/react-signin-google'

class Example extends Component {
  render () {
    return (
      <SignInButton as='a' href='#' />
    )
  }
}

Disabled

Note that for a tags only, when disabled it will remove the href attribute (if passed).

import React, { Component } from 'react'

import SignInButton from '@dougrich/react-signin-google'

class Example extends Component {
  render () {
    return (
      <SignInButton disabled onClick={...} />
    )
  }
}

License

Code is licensed under MIT © dougrich

Images located in the signin-assets are taken from here, licensed for use under Creative Commons Attribution 4.0 License. See site for additional details on licensing.