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

npm install @nhost/react graphql

Yarn

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.