Skip to content
We've just launched - check out our docs! đź“—
  • React
  • Getting Started

Getting Started

đź’ˇ

These docs are written for a React developer building on livepeer.js. For Node.js or alternative frameworks, you can use the vanilla JS library.

Installation

Install @livepeer/react using your favorite package manager.

npm i @livepeer/react

Quick Start

1. 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

2. Wrap app with LivepeerConfig

Next, wrap the app with the LivepeerConfig component, passing the client to it. This is typically included in _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}>
      <SomeComponents />
    </LivepeerConfig>
  );
}

3. Enjoy!

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

import { useLivepeerProvider } from '@livepeer/react';
 
function Livepeer() {
  const livepeerProvider = useLivepeerProvider();
 
  return <div>Using {livepeerProvider.getConfig().name}</div>;
}

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