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 and it's peer dependencies using your favorite package manager:

npm install @golem-sdk/react @golem-sdk/task-executor@2 @golem-sdk/golem-js@3

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

<YagnaProvider>
  <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, setYagnaOptions } = useYagna()
  const inputRef = useRef(null)
  if (isConnected) {
    return <span>Connected to Yagna!</span>
  }
  return (
    <div>
      <div>Enter your app key to connect to Yagna</div>
      <input ref={inputRef} />
      <button
        onClick={() => setYagnaOptions({ apiKey: inputRef.current.value })}
      >
        Set app key
      </button>
    </div>
  )
}

Add this component to your application and refresh the page. Enter your app-key and if you have set up everything correctly you should see "Connected to Yagna!".