Getting Started - Livepeer Docs

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.

React
React Native

npm i @livepeer/react

React Native also requires some peer dependencies (used in the Player component). We rely on expo for pod installation/linking. You must ensure that the correct version of react-native-svg is installed.If you’re installing this in a bare React Native app, you should also follow the extra expo-av installation instructions.

React Native

expo install @livepeer/react-native expo-av react-native-svg

Create a livepeer client

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

React
React Native

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

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

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

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.

React
React Native

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>
  );
}

This is added to App.js, so that the LivepeerConfig React Context is available across every component.

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

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.

React
React Native

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

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

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

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

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.

​Installation

​Create a livepeer client

​Wrap app with LivepeerConfig

​Enjoy!

Installation

Create a livepeer client

Wrap app with `LivepeerConfig`

Enjoy!