Getting Started
These docs are written for a React or React Native developer building on livepeer.js. For Node.js or alternative frameworks, you can use the vanilla JS library (docs coming soon).
Installation
Install livepeer.js using your favorite package manager.
npm i @livepeer/reactQuick 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 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>
);
}3. 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.