Skip to main content

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 install @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.