Getting Started
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
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' }),
});
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>
);
}
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>;
}
Want to learn more? Continue reading the documentation for more details.