open-index/open-npm huggingface dataset:
npm package: @livekit/react-components
Description: LiveKit SDK & Components
Author: davidzhao
Latest version: 1.1.0
Deprecated: DEPRECATED: This package has been deprecated use @livekit/components-react instead

# LiveKit React Component Library

This package provides pre styled React components that makes it easy to use LiveKit in a React app.

## Install

```bash
npm install --save @livekit/react-components livekit-client
```

## Demo

https://example.livekit.io.

Source available in [example](../../example/)

## Usage

### Video room with built-in UI

Without customization, the component would use a default skin as seen in the demo above.

```tsx
import { LiveKitRoom } from '@livekit/react-components';
// CSS should be explicitly imported if using the default UI
import '@livekit/react-components/dist/index.css';
// used by the default ParticipantView to maintain video aspect ratio.
// this CSS must be imported globally
// if you are using a custom Participant renderer, this import isn't necessary.
import 'react-aspect-ratio/aspect-ratio.css';

export const RoomPage = () => {
  const url = 'wss://your_host';
  const token = 'your_token';
  return (
    <div className="roomContainer">
      <LiveKitRoom url={url} token={token} onConnected={(room) => onConnected(room)} />
    </div>
  );
};

async function onConnected(room) {
  await room.localParticipant.setCameraEnabled(true);
  await room.localParticipant.setMicrophoneEnabled(true);
}
```

### Customize rendering

To provide your own rendering, override one or more of `stageRenderer`, `participantRenderer`, and `controlRenderer`. It's possible customize a single renderer and use defaults for the others.

```tsx
export const RoomPage = () => {
  const url = 'wss://your_host';
  const token = 'your_token';
  return (
    <LiveKitRoom
      url={url}
      token={token}
      // stageRenderer renders the entire stage
      stageRenderer={(props: StageProps) => {
        return <div />;
      }}
      // participantRenderer renders a single participant
      participantRenderer={(props: ParticipantProps) => {
        return <div />;
      }}
      // controlRenderer renders the control bar
      controlRenderer={(props: ControlsProps) => {
        return <div />;
      }}
    />
  );
};
```
npm package: @livekit/react-core
Description: LiveKit Core React SDK
Author: davidzhao
Latest version: 1.1.0
Deprecated: DEPRECATED: This package has been deprecated use @livekit/components-react instead

# Livekit React Core

## Install

```bash
npm install --save @livekit/react-core livekit-client
```

## Using hooks

The provided components make use of two hooks: `useRoom` and `useParticipant`, they will help you manage internal LiveKit callbacks and map them into state variables that are ready-to-use from React components.

Using the `connect` function returned by useRoom will ensure that callbacks are registered automatically and the other state variables are updated when changes take place in the room.

```tsx
import { useRoom, useParticipant } from '@livekit/react-core'

export const MyComponent = () => {
  const roomOptions: RoomOptions = {
    adaptiveStream: true,
    dynacast: true,
  }
  const { connect, isConnecting, room, error, participants, audioTracks } = useRoom(roomOptions);

  async function init() {
    // initiate connection to the livekit room
    await connect(livekitUrl, livekitToken);
    // request camera and microphone permissions and publish tracks
    await room.localParticipant.enableCameraAndMicrophone();
    ...
  }

  useEffect(() => {
    init().catch(console.error)
  }, [])

  return (...)
}

export const ParticipantRenderer = ({ participant }) => {
  const { isSpeaking, subscribedTracks } = useParticipant(participant)
  ...
}
```

### Rendering video and audio

When building your custom UI, it's helpful to use track renderers that are provided in this library. `AudioRenderer` and `VideoRenderer` would render an audio and video track, respectively.