Introduction

Get started with the React SDK

Prerequisites

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

info

The React SDK is designed to work with the yagna version 0.13.0 or above. If you have an older version installed, please update it before proceeding.

Installation

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

npm install @golem-sdk/react

Configuring the SDK

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.

Connecting to Yagna

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'

Putting it all together

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!".

Next steps

To learn more about the SDK, check out the API reference.

If you'd like to see the SDK in action before you start using it, check out the example application.

Was this helpful?