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.
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' }),
});
import { createReactClient, studioProvider } from '@livepeer/react-native';
const client = createReactClient({
provider: studioProvider({ apiKey: 'yourStudioApiKey' }),
});
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>
);
}
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.
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>;
}
