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

LivepeerConfig

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

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

Usage

import { LivepeerConfig } from '@livepeer/react';
 
function App() {
  return (
    <LivepeerConfig>
      <YourRoutes />
    </LivepeerConfig>
  );
}

Configuration

client

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

import { createReactClient, studioProvider } from '@livepeer/react';
 
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.

import { createReactClient, studioProvider } from '@livepeer/react';
 
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>
  );
}