{"id":19784418,"url":"https://github.com/vanbui1995/react-sipjs","last_synced_at":"2025-09-18T00:32:27.004Z","repository":{"id":198176849,"uuid":"698276407","full_name":"vanbui1995/react-sipjs","owner":"vanbui1995","description":"React components for SIP.js ","archived":false,"fork":false,"pushed_at":"2024-11-29T12:55:29.000Z","size":105,"stargazers_count":16,"open_issues_count":6,"forks_count":6,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-29T13:43:10.609Z","etag":null,"topics":["call","react","sip","sipjs","voip","webrtc"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-sipjs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vanbui1995.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-29T14:49:31.000Z","updated_at":"2024-11-29T12:55:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"74461810-9f0f-4d47-87e0-a20da8fcf44c","html_url":"https://github.com/vanbui1995/react-sipjs","commit_stats":null,"previous_names":["vanbui1995/react-sipjs-client"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanbui1995%2Freact-sipjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanbui1995%2Freact-sipjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanbui1995%2Freact-sipjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanbui1995%2Freact-sipjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vanbui1995","download_url":"https://codeload.github.com/vanbui1995/react-sipjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233432867,"owners_count":18675501,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["call","react","sip","sipjs","voip","webrtc"],"created_at":"2024-11-12T06:11:26.367Z","updated_at":"2025-09-18T00:32:21.573Z","avatar_url":"https://github.com/vanbui1995.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n\u003c!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 --\u003e\n\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\u003c!--\n*** Thanks for checking out the Best-README-Template. If you have a suggestion\n*** that would make this better, please fork the repo and create a pull request\n*** or simply open an issue with the tag \"enhancement\".\n*** Don't forget to give the project a star!\n*** Thanks again! Now go create something AMAZING! :D\n--\u003e\n\n\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\u003c!--\n*** I'm using markdown \"reference style\" links for readability.\n*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).\n*** See the bottom of this document for the declaration of the reference variables\n*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.\n*** https://www.markdownguide.org/basic-syntax/#reference-style-links\n--\u003e\n\n\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/vanbui1995/react-sipjs\"\u003e\n    \u003cimg src=\"https://sipjs.com/shared/img/logo.png\"\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eReact SIP.js Client\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    React components for \u003ca href=\"https://sipjs.com\"\u003eSIP.js\u003c/a\u003e.\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/vanbui1995/react-sipjs/tree/main/examples/full-example\"\u003eView Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/vanbui1995/react-sipjs/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/vanbui1995/react-sipjs/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## About The Project\n\n[Image here]\n\nThe library provide the react components, almost of components are React Hook, it provides easy way to build the sessions, perform actions on SIP calls\n\n\u003c!-- GETTING STARTED --\u003e\n## Getting Started\n\nThis is an example of how you may give instructions on setting up your project locally.\nTo get a local copy up and running follow these simple example steps.\n\n\n### Installation\n\nInstall via npm or yarn\n\n`yarn add react-sipjs`\n`npm install react-sipjs`\n\n\n\u003c!-- USAGE EXAMPLES --\u003e\n## Usage\n\n1. Import and use the `SIPProvider` on our root application:\n```js\nimport { SIPProvider } from \"react-sipjs\";\n\nfunction App() {\n  return (\n    \u003cdiv className=\"p-5\"\u003e\n      \u003cSIPProvider\n        options={{\n          domain: \"voice.chatchilladev.sip.jambonz.cloud\",\n          webSocketServer: \"wss://sip.jambonz.cloud:8443\",\n        }}\n      \u003e\n        \u003cdiv\u003e\n          \u003cCallCenter /\u003e\n        \u003c/div\u003e\n      \u003c/SIPProvider\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n2. Use `useSIPProvider` at the hook to get `connectAndRegister` method to connect \u0026 register with SIP account\n```js\n\nimport { useSIPProvider } from \"react-sipjs\";\n\nexport const CallCenter = () =\u003e {\n  const [username, setUsername] = useState\u003cstring\u003e(\"test8\");\n  const [password, setPassword] = useState\u003cstring\u003e(\"test123\");\n  const {\n    connectAndRegister,\n    connectStatus,\n  } = useSIPProvider();\n  \n  useEffect(() =\u003e {\n    connectAndRegister({\n      username: username,\n      password: password,\n    });\n  }, []);\n\n  return ...;\n}\n```\n3. Make the first call\n```js\nconst {\n  sessionManager\n  sessions\n} = useSIPProvider();\n\nawait sessionManager?.call(`sip:${callTo}@voice.chatchilladev.sip.jambonz.cloud`);\n```\n4. Retrive reactive sessions\n```js\nconst {\n  sessions\n} = useSIPProvider();\n\nsessions.forEach(session =\u003e {\n  console.log(session.id, session.state);\n})\n```\n5. Perform action with single session with `useSessionCall`\n```js\nexport const CallSessionItem = (props: { sessionId: string }) =\u003e {\n  const { sessionId } = props;\n  const {\n    isHeld,\n    isMuted,\n    decline,\n    hangup,\n    hold,\n    mute,\n    answer,\n    session,\n    unhold,\n    unmute,\n    direction,\n    timer,\n  } = useSessionCall(sessionId);\n  \n  return (\n    \u003cdiv\u003e\n      \u003cp\u003e{session.state}\u003c/p\u003e\n        {session.state === SessionState.Initial \u0026\u0026 (\n        \u003c\u003e\n          \u003cbutton  onClick={answer}\u003eAnswer\u003c/button\u003e\n          \u003cbutton  onClick={decline}\u003eDecline\u003c/button\u003e\n        \u003c/\u003e\n      )}\n      \n      {SessionState.Established === session.state \u0026\u0026 (\n        \u003c\u003e\n          \u003cbutton  onClick={isHeld ? unhold : hold}\u003e\n            {isHeld ? \"Unhold\" : \"Hold\"}\n          \u003c/button\u003e\n          \u003cbutton  onClick={isMuted ? unmute : mute}\u003e\n            {isMuted ? \"Ummute\" : \"Mute\"}\n          \u003c/button\u003e\n        \u003c/\u003e\n      )}\n      {![SessionState.Terminating, SessionState.Terminated].includes(\n      session.state) \u0026\u0026 \u003cbutton  onClick={hangup}\u003eHang Up\u003c/button\u003e}\n    \u003c/div\u003e\n  )\n}\n```\n\n\u003c!-- CONTRIBUTING --\u003e\n## Contributing\n\nContributions are what makes the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nIf you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag \"enhancement\".\nDon't forget to give the project a star! Thanks again!\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003c!-- CONTACT --\u003e\n## Contact\nVan Bui - btvan1995@gmail.com\n\nProject Link: [https://github.com/vanbui1995/react-sipjs](https://github.com/vanbui1995/react-sipjs)\n\n\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n[contributors-shield]: https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg?style=for-the-badge\n[contributors-url]: https://github.com/othneildrew/Best-README-Template/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=for-the-badge\n[forks-url]: https://github.com/othneildrew/Best-README-Template/network/members\n[stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=for-the-badge\n[stars-url]: https://github.com/othneildrew/Best-README-Template/stargazers\n[issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=for-the-badge\n[issues-url]: https://github.com/othneildrew/Best-README-Template/issues\n[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=for-the-badge\n[license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge\u0026logo=linkedin\u0026colorB=555\n[linkedin-url]: https://linkedin.com/in/othneildrew\n[product-screenshot]: images/screenshot.png\n[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge\u0026logo=nextdotjs\u0026logoColor=white\n[Next-url]: https://nextjs.org/\n[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\n[React-url]: https://reactjs.org/\n[Vue.js]: https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge\u0026logo=vuedotjs\u0026logoColor=4FC08D\n[Vue-url]: https://vuejs.org/\n[Angular.io]: https://img.shields.io/badge/Angular-DD0031?style=for-the-badge\u0026logo=angular\u0026logoColor=white\n[Angular-url]: https://angular.io/\n[Svelte.dev]: https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge\u0026logo=svelte\u0026logoColor=FF3E00\n[Svelte-url]: https://svelte.dev/\n[Laravel.com]: https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge\u0026logo=laravel\u0026logoColor=white\n[Laravel-url]: https://laravel.com\n[Bootstrap.com]: https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge\u0026logo=bootstrap\u0026logoColor=white\n[Bootstrap-url]: https://getbootstrap.com\n[JQuery.com]: https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge\u0026logo=jquery\u0026logoColor=white\n[JQuery-url]: https://jquery.com \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanbui1995%2Freact-sipjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvanbui1995%2Freact-sipjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanbui1995%2Freact-sipjs/lists"}