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

// 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"')
})
``