Get started with the React SDK

Before you get started, make sure you have installed yagna and created an app-key

To add the SDK to an existing react project simply install it using your favorite package manager:

npm install @golem-sdk/react

Then make sure to wrap your app with the YagnaProvider component:

<YagnaProvider config={{ yagnaAppKey: 'my-app-key' }}>
  <App />
</YagnaProvider>

This provides context for the rest of the SDK. See the YagnaProvider API reference for the list of all available configuration options.

Yagna blocks all requests from external origins by default. To allow the SDK to communicate with it you need start Yagna with --api-allow-origin='<your-domain>' flag. For example:

yagna service run --api-allow-origin='http://localhost:3000'

Now that you have the SDK installed and configured, you can start using it in your app. Let's start with a simple example that displays the connection status to Yagna:

function YagnaStatus() {
  const { isConnected, reconnect, isLoading, error } = useYagna()
  if (isLoading) {
    return <div>Loading...</div>
  }
  return (
    <div>
      <div>Yagna is {isConnected ? 'connected' : 'disconnected'}</div>
      <button onClick={reconnect} disabled={isConnected}>
        Reconnect
      </button>
      {error && <div>Error: {error.toString()}</div>}
    </div>
  )
}

Add this component to your application and refresh the page. If you have set up everything correctly you should see "Yagna is connected"