Nhost 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.

Documentation

• Quickstart
• Reference documentation

Install

Install the Nhost React client together with GraphQL:

# With npm
npm install @nhost/react graphql

# With Yarm
yarn add @nhost/react graphql

Initialise

Initialize a single nhost instance and wrap your app with the NhostReactProvider.

import React from 'react'
import ReactDOM from 'react-dom'

import { NhostClient, NhostReactProvider } from '@nhost/react'

import App from './App'

const nhost = new NhostClient({
  subdomain: '<Your Nhost app subdomain>',
  region: '<Your Nhost app region>'
})

ReactDOM.render(
  <React.StrictMode>
    <NhostReactProvider nhost={nhost}>
      <App />
    </NhostReactProvider>
  </React.StrictMode>,
  document.getElementById('root')
)