Add React media components (#57)

packages/react-client/README.md

@@ -31,7 +31,7 @@ function App() {
 
 ```jsx
 // Phone.jsx
-import { useNotification } from '@telnyx/react-client';
+import { useNotification, Audio } from '@telnyx/react-client';
 
 function Phone() {
   const notification = useNotification();
@@ -42,12 +42,16 @@ function Phone() {
       {activeCall &&
         activeCall.state === 'ringing' &&
         'You have an incoming call.'}
+
+      <Audio stream={activeCall && activeCall.remoteStream} />
     </div>
   );
 }
 ```
 
-### with `useCallbacks`
+### Hooks
+
+#### `useCallbacks`
 
 ```jsx
 import { useCallbacks } from '@telnyx/react-client';
@@ -56,14 +60,84 @@ function Phone() {
   useCallbacks({
     onReady: () => console.log('client ready'),
     onError: () => console.log('client registration error'),
+    onSocketError: () => console.log('client socket error'),
+    onSocketClose: () => console.log('client disconnected'),
     onNotification: (x) => console.log('received notification:', x),
   });
 
   // ...
 }
 ```
 
-### with `TelnyxRTCContext.Consumer`
+#### `useTelnyxRTC`
+
+If you need more fine-tuned control over TelnyxRTC, you also have access to `useTelnyxRTC` directly.
+
+```jsx
+import { useTelnyxRTC } from '@telnyx/react-client';
+
+function Phone() {
+  const client = useTelnyxRTC({ login_token: 'mytoken' });
+
+  client.on('telnyx.ready', () => {
+    console.log('client ready');
+  });
+
+  // ...
+}
+```
+
+Take care to use this hook only once in your application. For most cases, we recommend you use [TelnyxRTCContext/TelnyxRTCProvider](#TelnyxRTCContextProvider) instead of this hook directly. This ensures that you only have one Telnyx client instance running at a time.
+
+#### `useContext` with `TelnyxRTCContext`
+
+You can retrieve the current TelnyxRTC context value by using React's [`useContext` hook](https://reactjs.org/docs/hooks-reference.html#usecontext), as an alternative to [TelnyxRTCContext.Consumer](#TelnyxRTCContextConsumer).
+
+```jsx
+import React, { useContext } from 'react';
+import { TelnyxRTCContext } from '@telnyx/react-client';
+
+function Phone() {
+  const client = useContext(TelnyxRTCContext);
+
+  client.on('telnyx.ready', () => {
+    console.log('client ready');
+  });
+
+  // ...
+}
+```
+
+### Components
+
+#### `TelnyxRTCContextProvider`
+
+```jsx
+import { TelnyxRTCProvider } from '@telnyx/react-client';
+
+function App() {
+  const credential = {
+    // You can either use your On-Demand Credential token
+    // or your Telnyx SIP username and password
+    // login_token: 'mytoken',
+    login: 'myusername',
+    password: 'mypassword',
+  };
+
+  const options = {
+    ringtoneFile: 'https://example.com/sounds/incoming_call.mp3',
+    ringbackFile: 'https://example.com/sounds/ringback_tone.mp3',
+  };
+
+  return (
+    <TelnyxRTCProvider credential={credential} options={options}>
+      <Phone />
+    </TelnyxRTCProvider>
+  );
+}
+```
+
+#### `TelnyxRTCContext.Consumer`
 
 ```jsx
 import { TelnyxRTCContext } from '@telnyx/react-client';
@@ -77,39 +151,50 @@ function PhoneWrapper() {
 }
 ```
 
-### `useTelnyxRTC` usage
+#### `Audio`
 
 ```jsx
-import { useTelnyxRTC } from '@telnyx/react-client';
+import { Audio } from '@telnyx/react-client';
 
-function Phone() {
-  const client = useTelnyxRTC({ login_token: 'mytoken' });
+function Phone({ activeCall }) {
+  return (
+    <div>
+      <Audio stream={activeCall.remoteStream} />
+    </div>
+  );
+}
+```
 
-  client.on('telnyx.ready', () => {
-    console.log('client ready');
-  });
+#### `Video`
 
-  // ...
+```jsx
+import { Video } from '@telnyx/react-client';
+
+function VideoConference({ activeCall }) {
+  return (
+    <div>
+      <Video stream={activeCall.localStream} />
+      <Video stream={activeCall.remoteStream} />
+    </div>
+  );
 }
 ```
 
-You should only have one Telnyx client instance running at a time. To ensure a single instance, it's recommended to use `TelnyxRTCContext`/`TelnyxRTCProvider` instead of using this hook directly.
-
 ## Development
 
 Install dependencies:
 
 ```bash
 npm install
 # in another tab:
-cd example && npm install
+cd example && npm install && npm run setup
 ```
 
 Watch and compile files:
 
 ```bash
 npm start
-# in another tab:
+# fill in example/.env, then in another tab:
 cd example && npm start
 ```
 

packages/react-client/example/.env.sample

@@ -0,0 +1,2 @@
+REACT_APP_TELNYX_LOGIN_TOKEN=
+REACT_APP_TELNYX_PHONE_NUMBER=

packages/react-client/example/README.md

@@ -2,4 +2,11 @@ This example was bootstrapped with [Create React App](https://github.com/faceboo
 
 It is linked to the @telnyx/react-client package in the parent directory for development purposes.
 
-You can run `npm install` and then `npm start` to test your package.
+To install the example app:
+
+```shell
+npm install
+npm run setup
+```
+
+To start the app, fill in `.env` with information from your Telnyx portal and run `npm start`.