https://github.com/raghav-grover/react-twilio

React twilio is a react powered mult-participant Twilio Component, having controls to mute, disable camera and disconnect.
https://github.com/raghav-grover/react-twilio

Last synced: 4 months ago
JSON representation

React twilio is a react powered mult-participant Twilio Component, having controls to mute, disable camera and disconnect.

• Host: GitHub
• URL: https://github.com/raghav-grover/react-twilio
• Owner: raghav-grover
• Created: 2017-12-04T05:09:40.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-06T10:01:43.000Z (about 7 years ago)
• Last Synced: 2024-08-07T03:49:21.679Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 624 KB
• Stars: 14
• Watchers: 3
• Forks: 3
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-twilio 

React twilio is a react powered multi-participant Twilio Component, having controls to mute, disable camera and disconnect.

  - Supports mute option and camera disable option

  - Supports disconnect/reconnect feature

  - Supports multiple participants, any of the participants can be switched to the full screen.

  - Flashes a notification, when a participant is added or leaves the room

  - Fully built in React :)

## Getting Started

To install: `npm install react-twilio`

#### Connecting to Room

![Connect to room](https://thumbs.gfycat.com/HandyHeavenlyGyrfalcon-size_restricted.gif)

#### How it works 

![How it works](https://thumbs.gfycat.com/DependentUntriedLeech-size_restricted.gif)

### React Twilio

To connect to a room, simply pass the roomname in the props along with the Auth Token

```javascript

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import TwilioVideo from 'react-twilio';

class App extends Component {

  constructor(props) {

    super(props);

    this.shadowStyle = {

      border: '1px solid #dcd9d9',

      borderRadius: '4px',

      marginBottom: '15px',

      boxShadow: '5px 5px 5px #e0e3e4',

      fontWeight: 'lighter'

    }

    let obj = { token: "xxx-your-token-yyy" }

    this.token = obj.token;

  }

  render() {

    return (

      


        

      

    );

  }

}


export default App;

```

## Acknowledgements

  - Hat tip to anyone who uses and contributes to the code.

  - For Twilio team, who has such an extensive documentation.