LivepeerConfig

The LivepeerConfig component manages configuration for all hooks using React Context.

Usage

React

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

The LivepeerConfig should wrap all of your pages, so every page can use hooks provided by livepeer.js.

App.js

const client = createReactClient({
  provider: studioProvider({ apiKey: 'yourStudioApiKey' }),
});
 
function App() {
  return (
    <LivepeerConfig client={client}>
      <YourRoutes />
    </LivepeerConfig>
  );
}

Configuration

client

A livepeer Client instance that consists of configuration options. Required to connect to a provider.

const client = createReactClient({
  provider: studioProvider({ apiKey: 'yourStudioApiKey' }),
});
 
function App() {
  return (
    <LivepeerConfig client={client}>
      <YourRoutes />
    </LivepeerConfig>
  );
}

theme

Sets the global theme overrides. It is recommended to use this for any global app styles. This is optional and every value has a default. See the source code for more information.

const client = createReactClient({
  provider: studioProvider({ apiKey: 'yourStudioApiKey' }),
});
 
const theme: ThemeConfig = {
  colors: {
    accent: 'rgb(0, 145, 255)',
    containerBorderColor: 'rgba(0, 145, 255, 0.9)',
  },
  fonts: {
    display: 'Inter',
  },
  radii: {
    slider: '4px',
  },
};
 
function App() {
  return (
    <LivepeerConfig client={client} theme={theme}>
      <YourRoutes />
    </LivepeerConfig>
  );
}

Last updated on 11/30/2022

Client Player