React
The Nhost React client exports a React provider, hooks, and helpers that make it easier to work with Nhost in your React app. If you're using React with Next.js, you should use the Nhost Next.js client.
Installation
Install the Nhost React client together with GraphQL:
- npm
- Yarn
npm install @nhost/react graphql
yarn add @nhost/react graphql
Initializing
After installation, initialize a single Nhost Client (nhost
) under src/lib/nhost.js
.
src/lib/nhost.js
import { NhostClient } from '@nhost/react'
const nhost = new NhostClient({
subdomain: '<your-subdomain>',
region: '<your-region>'
})
export { nhost }
Import nhost
and wrap your app with the NhostProvider
.
src/App.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { NhostClient, NhostProvider } from '@nhost/react'
import { nhost } from './lib/nhost'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<NhostProvider nhost={nhost}>
<App />
</NhostProvider>
</React.StrictMode>,
document.getElementById('root')
)
export { nhost }
info
The nhost
instance created with the NhostClient
above is the same as the JavaScript Nhost client.