https://github.com/ph-fritsche/react-gapi

Google API per React hook
https://github.com/ph-fritsche/react-gapi

Last synced: 9 days ago
JSON representation

Google API per React hook

• Host: GitHub
• URL: https://github.com/ph-fritsche/react-gapi
• Owner: ph-fritsche
• License: mit
• Created: 2020-12-11T09:10:24.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-04-28T18:20:54.000Z (over 2 years ago)
• Last Synced: 2024-10-14T14:42:24.575Z (23 days ago)
• Language: TypeScript
• Homepage:
• Size: 270 KB
• Stars: 15
• Watchers: 2
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-gapi

Provides the configured `gapi` library from https://apis.google.com/js/api.js per react hook.

```js

// src/App.js

import { GoogleApiProvider } from 'react-gapi'

import { MyDriveComponent } from './MyDriveComponent.js'

export function App() {

  return (

    

      // ...

      

      // ...

      

      // ...

    

  )

}

```

```js

// src/MyAuthComponent.js

import { useGoogleApi } from 'react-gapi'

export function MyAuthComponent() {

  const gapi = useGoogleApi({

    scopes: [

      'profile',

    ],

  })

  const auth = gapi?.auth2.getAuthInstance()

  return 
{

    !auth

      ? Loading...

      : auth?.isSignedIn.get()

        ? `Logged in as "${auth.currentUser.get().getBasicProfile().getName()}"`

        :  auth.signIn()}>Login

  }

}

```

```js

// src/MyDriveComponent.js

import { useGoogleApi } from 'react-gapi'


export function MyDriveComponent() {

  const gapi = useGoogleApi({

    discoveryDocs: [

      'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest',

    ],

    scopes: [

      'https://www.googleapis.com/auth/drive.metadata.readonly',

    ],

  })

  if (!gapi) {

    return 
Some loading screen

  }


  // access the Drive API per gapi.client.drive

}

```

## Testing

```js

// src/MyAuthComponent.test.js

import React from 'react'

import { act, render, screen } from '@testing-library/react'

import userEvent from '@testing-library/user-event'

import '@testing-library/jest-dom'

import { MyAuthComponent } from './MyAuthComponent'

import { GoogleApiProvider } from 'react-gapi'

import { createGapiMock } from 'react-gapi/testing'

it('Sign in', async () => {

    const { user } = createGapiMock()

    render(

        

            

        ,

    )

    userEvent.click(await screen.findByRole('button', { name: /login/i }))

    act(() => {

        user.grantsScopes?.(true, { name: 'John Doe' })

    })

    expect(await screen.findByText(/Logged in as /)).toHaveTextContent('"John Doe"')

})

```