These docs are written for a React or React Native developer building on @livepeer/react or @livepeer/react-native.

​
Installation

Install Livepeer React using your favorite package manager.

npm i @livepeer/react

​
Create a livepeer client

First, create a livepeer Client instance using createReactClient, and pass a provider to it.

import { createReactClient, studioProvider } from '@livepeer/react';

const client = createReactClient({
  provider: studioProvider({ apiKey: 'yourStudioApiKey' }),
});

Note: If you choose to use Studio as a provider, you will need to configure an API key for the studioProvider which is CORS-protected API key.

Read more about client configuration

​
Wrap app with LivepeerConfig

Next, wrap the app with the LivepeerConfig component, passing the client to it.

This is added to _app.js for Next.js or App.js with Create React App, so that the LivepeerConfig React Context is available across every component.

import {
  LivepeerConfig,
  createReactClient,
  studioProvider,
} from '@livepeer/react';

const client = createReactClient({
  provider: studioProvider({ apiKey: 'yourStudioApiKey' }),
});

function App() {
  return (
    <LivepeerConfig client={client}>
      <SomeComponent />
    </LivepeerConfig>
  );
}

​
Enjoy!

Use hooks! Every component inside the LivepeerConfig is now set up to use the livepeer hooks.

import { useAsset } from '@livepeer/react';

function SomeComponent() {
  const asset = useAsset({ assetId: 'd8e8b87d-6774-4083-a2d7-4e85872d18cd' });

  return <div>Asset: {asset.name}</div>;
}

Want to learn more? Continue reading the documentation for more details.

Was this page helpful?

Migration Guide for 4+Client