# react-dialpad-fork

> ![npm](https://img.shields.io/npm/v/react-dialpad.svg) ![travis](https://img.shields.io/travis/mhmtztmr/react-dialpad.svg)

Latest version **1.0.11** (published 2019-08-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dialpad-fork
pnpm add react-dialpad-fork
yarn add react-dialpad-fork
bun add react-dialpad-fork
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2019-08-05 |
| First published | 2019-08-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 904.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mahmut Oztemur, Dayton Mills |
| Maintainers | daytonmills |

## Links

- npm: https://www.npmjs.com/package/react-dialpad-fork
- Repository: https://github.com/daytonmills/react-dialpad
- Homepage: https://github.com/daytonmills/react-dialpad#readme
- Issues: https://github.com/daytonmills/react-dialpad/issues
- npm.io page: https://npm.io/package/react-dialpad-fork

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.4.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.2

## Recent versions

- 1.0.11 (latest) — 2019-08-05
- 1.0.10 — 2019-08-05
- 1.0.9 — 2019-08-05
- 1.0.8 — 2019-08-05
- 1.0.7 — 2019-08-05
- 1.0.6 — 2019-08-05
- 1.0.5 — 2019-08-05
- 1.0.4 — 2019-08-05
- 1.0.3 — 2019-08-05

## README

# React Dialpad #

![npm](https://img.shields.io/npm/v/react-dialpad.svg) ![travis](https://img.shields.io/travis/mhmtztmr/react-dialpad.svg)

React Dialpad provides you a simple UI independent of communication platform to create calls and handle incoming calls.

[Demo](https://mhmtztmr.github.io/react-dialpad/demo/) using [Peer.js](https://peerjs.com/)

Open demo on two browser windows to see peer-to-peer behaviour.

## Install ##

`npm i react-dialpad`

## Features ##

Component interaction is achieved in two ways:

	- Prop of `onActionInvoked` in order to listen actions invoked by user via UI buttons
	- Component methods in order to update component

## Props ##

### onActionInvoked(action, data) ###

Called when an action is invoked by the user by pressing buttons

Params:
  - action: One of the following actions
    - CALL_STARTED: Invoked when Call button is pressed
    - CALL_ENDED: Invoked when the Call End button pressed
    - CALL_REPLIED: Invoked when the Call Reply button pressed
    - CALL_REJECTED: Invoked when the Call Reject button pressed
  - data: Data related to action. e.g. called number for CALL_STARTED action

### onStateChanged(state) ###

Called when any state change has occured. Just for loggin purpose

States:
- DEFAULT:
- CALLING:
- RINGING:
- ON_CALL:
- INCOMING_CALL:
- REPLYING:
- REJECTING:
- ENDING

## Methods ##

Methods can be accessed using [Refs](https://reactjs.org/docs/refs-and-the-dom.html)

### setRinging() ###

- Navigates to RINGING state.

### setOnCall() ###

- Navigates to ON_CALL state.

### endCall() ###

- Resets to DEFAULT state.

### setIncomingCall(contact) ###

- Navigates to INCOMING_CALL state. contact: {	name, number }

## Inspired by ##

https://dribbble.com/shots/2280148-Day-003-Animated-Dial-Pad
https://codepen.io/anon/pen/mWvymM

## Example Usage ##

```JavaScript
import React from 'react';
import Peer from 'peerjs';

import ReactDialpad from 'react-dialpad';

class App extends React.Component {
	constructor() {
		super();
		this.state = {
			number: '',
		};
		this.peer = null;
		this.call = null;
		this.getUserMedia = this.getUserMedia.bind(this);
		this.registerCallEvents = this.registerCallEvents.bind(this);
		this.registerPeerEvents = this.registerPeerEvents.bind(this);

		this.onActionInvoked = this.onActionInvoked.bind(this);
		this.onStateChanged = this.onStateChanged.bind(this);
		this.onCallStarted = this.onCallStarted.bind(this);
		this.onCallEnded = this.onCallEnded.bind(this);
		this.onCallReplied = this.onCallReplied.bind(this);
		this.onCallRejected = this.onCallRejected.bind(this);
	}

	componentDidMount() {
		const number = Date.now().toString().slice(-5);
		this.setState({
			number
		});
		const that = this;
		this.peer = new Peer(number, { secure: true, port: 443, debug: 3 });
		this.registerPeerEvents(this.peer);
	}

	getUserMedia() {
		navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
		return new Promise((resolve, reject) => {
			navigator.getUserMedia({ video: true, audio: true }, resolve, reject);
		});
	}

	registerCallEvents(call) {
		call.on('stream', (remoteStream) => {
			this.dialpad.setOnCall();
		});
		call.on('close', () => {
			this.dialpad.endCall();
		});
	}

	registerPeerEvents(peer) {
		peer.on('call', (call) => {
			this.call = call;
			this.dialpad.setIncomingCall({
				name: call.peer,
				number: call.peer
			});
		});
	}

	onActionInvoked(action, data) {
		switch (action) {
			case 'CALL_STARTED':
				this.onCallStarted(data.number);
				break;
			case 'CALL_ENDED':
				this.onCallEnded();
				break;
			case 'CALL_REPLIED':
				this.onCallReplied();
				break;
			case 'CALL_REJECTED':
				this.onCallRejected();
				break;
			default:
				break;
		}
	}

	onStateChanged(state) {
		console.log('to state', state);
	}

	onCallStarted(number) {
		console.log('Calling...', number);
		this.getUserMedia().then((stream) => {
			this.call = this.peer.call(number, stream);
			this.dialpad.setRinging();
			this.registerCallEvents(this.call);
		}).catch((err) => {
			console.log('Failed to get local stream', err);
		});
	}

	onCallEnded() {
		if (this.call.open) {
			this.call.close();
		} else {
			this.dialpad.endCall();
		}
	}

	onCallReplied() {
		this.getUserMedia().then((stream) => {
			this.call.answer(stream); // Answer the call with an A/V stream.
			this.registerCallEvents(this.call);
		}).catch((err) => {
			console.log('Failed to get local stream', err);
		});
	}

	onCallRejected() {
		if (this.call.open) {
			this.call.close();
		} else {
			this.dialpad.endCall();
		}
	}

	render() {
		const style = {
			margin: '0 30px',
			float: 'left',
		};

		return (
			<div className="app">
				<div style={style}>Your number: {this.state.number}</div>
				<ReactDialpad
					style={style}
					ref={dialpad => (this.dialpad = dialpad)}
					onActionInvoked={this.onActionInvoked}
					onStateChanged={this.onStateChanged}
				/>
			</div>
		);
	}
}

export default App;
```

---
_Source: https://npm.io/package/react-dialpad-fork · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._