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​

Initialize a single nhost instance using your Nhost subdomain and region:

src/lib/nhost.js
import { NhostClient } from '@nhost/react'

export const nhost = new NhostClient({
  subdomain: '<your-subdomain>',
  region: '<your-region>'
})

Using custom URLs​

There are cases where you might want to use a custom URL for one or more of the services (e.g: when you are self-hosting or you are running services on custom ports). You can do this by passing in the custom URLs when initializing the Nhost client:

src/lib/nhost.ts
import { NhostClient } from '@nhost/react'

export const nhost = new NhostClient({
  authUrl: 'https://auth.mydomain.com/v1',
  storageUrl: 'https://storage.mydomain.com/v1',
  graphqlUrl: 'https://graphql.mydomain.com/v1',
  functionsUrl: 'https://functions.mydomain.com/v1'
})

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.