npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-googleyolo

v0.1.3

Published

Simple googleyolo `Provider` and `withGoogleyolo` HOC-style method that fishes the library out of the context and passes it to the "connected" components as a prop.

Downloads

11

Readme

React googleyolo

Simple googleyolo Provider and withGoogleyolo HOC-style method that fishes the library out of the context and passes it to the "connected" components as a prop.

Googleyolo is of course what google calls its smartlock / one-tap sign-up and sign-in library.

Live demo here!

3 second demo

Usage

Feel free to look at the source code for the simplest of examples!

You'll be using it somewhat like ...

// somewhere near your app's entry point: index.js, app.js etc.

import { YoloProvider } from 'react-googleyolo'
// import YoloProvider from 'react-googleyolo' // also works
class App extends PureComponent {
  render() {
    return (
      <YoloProvider>
        <TheRestOfYourApp />
      </YoloProvider>
    )
  }
}
// in a component that needs googleyolo

import { withGoogleyolo } from 'react-googleyolo'
// ...
import { authenticateWithYourBackend } from '../api'

class Header extends PureComponent {
  state = { isLoading: false }

  retrieve = googleyolo =>
    googleyolo.retrieve().then(
      credential => {
        this.setState({ isLoading: false })

        // imaginary method, where you hit your backend with the idToken
        // to verify it really is valid, then sign them in and get their User object back
        authenticateWithYourBackend(credential.idToken).then(user => {
          this.setState(user)
        })
      },
      error => {
        this.setState({ isLoading: false })
      }
    )

  componentDidMount() {
    const { googleyolo } = this.props
    if (googleyolo) {
      this.setState({ isLoading: true })
      this.retrieve(googleyolo)
    }
  }

  componentDidUpdate(prevProps) {
    const { googleyolo } = this.props
    const { isLoading } = this.state

    if (googleyolo & !isLoading && !prevProps.googleyolo) {
      this.setState({ isLoading: true })
      this.retrieve(googleyolo)
    }
  }

  render() {
    const { isLoading, user } = this.state
    if (isLoading) {
      return <div>Loading auth...</div>
    }

    if (user) {
      return <div>You are logged in as {user.displayName}</div>
    }

    // Imaginary component that signs you in
    // It probably also uses `googleyolo` to call `.hint()`!
    return <GoogleLogin />
  }
}

export default withGoogleyolo(Header)

We expose a Provider, which loads the googleyolo client library. All this came about because google didn't seem to publish an npm package for it! The Provider then simply puts the googleyolo object in the context for any component further down the tree to use.

We also expose a withGoogleyolo helper method to fish out googleyolo from the context, without you going into the hassle of defining context types.

But because defining a context type is all that "connect" method does, we also provide a GoogleyoloShape in case you are comfortable with your components using things straight out of context.

Automatic Retrieval

In case the above seems like too much work, you may also provide a clientId string and an onRetrieveSuccess method to the Provider. This will make it do the retrieve call for you, calling your method afterwards with the received credential!

return (
  <YoloProvider
    clientId={process.env.REACT_APP_GOOGLE_CREDENTIALS_CLIENT_ID}
    onRetrieveSuccess={this.onRetrieveSuccess}
    onRetrieveFailure={this.onRetrieveFailure}
  >
    <Home />
  </YoloProvider>
)

User Signout

We also expose a handy Logout component you can customize to your heart's content. All it really does is googleyolo.disableAutoSignIn() for you on click, and then call its onAutoSignInDisabled you optionally gave it.

return <Logout />

// feel free to pass in children

return <Logout>Click here to logout forever</Logout>

// Or specify a different type of node if you don't want it to be a button

return <Logout node="span" />

User Signin re-prompt

Finally and due to popular demand, we now offer a similar Login button. Give it a clientId and it will make Google's official login flow appear. You may also give it something to do onLoginSuccess, or error, making this component a bit of a cross between the Provider and the Logout button.

return <Login clientId="iGotThisFromGoogle" />

// feel free to pass in children

return (
  <Login
    clientId={process.env.REACT_APP_GOOGLE_CREDENTIALS_CLIENT_ID}
    onRetrieveSuccess={this.onLoginSuccess}
    onLoginFailure={this.onRetrieveFailure}
  >
    Would you like to login?
  </Login>
)

// Or specify a different type of node if you don't want it to be a button

return <Login node="span" clientId="somanyapikeys" />