TypeScript icon, indicating that this package has built-in type declarations

1.1.74 • Public • Published

React JsSIP Wrapper

React wrapper for jssip. For discussion TelegramGroup


npm install react-jssip-wrapper

There is no need to install jssip as it is a dependency of react-jssip-wrapper.


import React, { useCallback, useRef } from "react";
import { SipProvider } from "react-jssip-wrapper";
import { IStore, setSip } from "store";
import { useDispatch, useSelector } from "react-redux";

const Sip = () => {
  const dispatch = useDispatch();
  const ref = useRef<any>();
  const connectionConfig = useSelector(
    (state: IStore) => state.sip.connectionConfig

  const onRefChange = useCallback((node: any) => {
    if (node === null) {
      // DOM node referenced by ref has been unmounted
    } else {
      dispatch(setSip({ ref: node }));
      ref.current = node;
  }, []);

  if (!connectionConfig) {
    return null;

  // const call = () =>
  //   ref.current?.startCall(`sip:${phone}@${connectionConfig.server}`);
  // const transfer = () => {
  //   ref.current?.state?.rtcSession?.refer(
  //     `sip:${transferPhone}@${connectionConfig.server}`
  //   );
  // };

  return (
        host={connectionConfig.server as string}
        pathname="" // Path in socket URI (e.g. wss://; "" by default
        user={connectionConfig.user as string}
        password={connectionConfig.password as string} // usually required (e.g. from ENV or props)
        autoRegister={false} // true by default, see jssip.UA option register
        // autoAnswer={true} // automatically answer incoming calls; false by default
        iceRestart={true} // force ICE session to restart on every WebRTC call; false by default
        debug={false} // wh
            urls: [
        setAction={(data: any) => {
          dispatch(setSip({, ref: ref.current }));
        audioId="newAudioId" // default 'sip-provider-audio' for output audio

export default Sip;

Child components get access to this context:

  sip: sipType,
  call: callType,

  registerSip: PropTypes.func,
  unregisterSip: PropTypes.func,

  answerCall: PropTypes.func,
  startCall: PropTypes.func,
  stopCall: PropTypes.func,

See lib/types.ts for technical details of what sipType and callType are. An overview is given below:


sip.status represents SIP connection status and equals to one of these values:

  • 'sipStatus/DISCONNECTED' when host, port or user is not defined
  • 'sipStatus/CONNECTING'
  • 'sipStatus/CONNECTED'
  • 'sipStatus/REGISTERED' after calling registerSip or after 'sipStatus/CONNECTED' when autoRegister is true
  • 'sipStatus/ERROR' in case of configuration, connection or registration problems


  • null when sip.status is not 'sipStatus/ERROR'
  • 'sipErrorType/CONFIGURATION'
  • 'sipErrorType/CONNECTION'
  • 'sipErrorType/REGISTRATION', sip.port, sip.user, ...<SipProvider />’s props (to make them easy to be displayed in the UI).

call is a unique session id of the actual established voice call; undefined between calls

call.status represents the status of the call:

  • 'callStatus/IDLE' between calls (even when disconnected)
  • 'callStatus/STARTING' active incoming or outgoing call request
  • 'callStatus/ACTIVE' during ongoing call
  • 'callStatus/STOPPING' during call cancelation request

call.direction indicates the direction of the ongoing call:

  • null between calls
  • 'callDirection/INCOMING'
  • 'callDirection/OUTGOING'

call.counterpart represents the call destination in case of outgoing call and caller for incoming calls. The format depends on the configuration of the SIP server (e.g. "bob" <>, or


When autoRegister is set to false, you can call sipRegister() and sipUnregister() manually for advanced registration scenarios.

To make calls, simply use these functions:

  • answerCall()
  • startCall(destination)
  • stopCall()

The value for destination argument equals to the target SIP user without the host part (e.g. +998945667725 or bob). The omitted host part is equal to host you’ve defined in SipProvider props (e.g.

The values for sip.status, sip.errorType, call.status and call.direction can be imported as constants to make typos easier to detect:

import {
} from "react-jssip-wrapper";

Custom PropTypes types are also provided by the library:

import { callType, extraHeadersType, iceServersType, sipType } from "react-jssip-wrapper";

Package Sidebar


npm i react-jssip-wrapper

Weekly Downloads






Unpacked Size

100 kB

Total Files


Last publish


  • jjkyuldashov