Skip to main content
New Participant
May 3, 2017
Question

How to use RingCentral and Reactjs?

Hi guys,

I'm trying to build a simple app in reactjs that uses RingCentral to make calls.


I'm having a hard time trying to login and make a call (not a ringout). I'm new to react and javascript as well.


Do you guys have any working example that I could use?


Thank you all.

8 replies

Employee
May 4, 2017
There is a project which provides reusable React components: https://github.com/ringcentral/ringcentral-js-widget

It's a public project however it's not officially published. So it's just FYI.
New Participant
February 15, 2021

Hello , If you have not able to made an app then get in touch with infomaze and hire mern stack developers for Developing the React JS Applications

The First Step
November 8, 2022

@Tyler Liu I have started building new react project using the https://github.com/ringcentral/ringcentral-js-widgets#readme. I am getting the below error when I start the application using "yarn start". I see the "getLanguageFromLocale" method exists on github in i18n package, but that library is not getting downloaded into node_modules folder. Please suggest.

Employee
November 8, 2022

If you just want to write a React app, please refer to https://github.com/tylerlong/ringcentral-web-phone-demo

It is a simper demo application.

The First Step
November 9, 2022

Thanks @Tyler Liu . I am planning to use ringcentral-js-widgets and override some of the behavior of those widgets. Ideally I want to build customized SMS widget which has some policies applied like (message templates, adding signatures for each message, populate the names and metadata for the incoming phone numbers from a database, etc).As per my understanding, I can't use the web-phone project for this scenario and I have to use widgets project. Please correct me if I am wrong.

Employee
November 9, 2022

If you prefer DIY, then you may use the web-phone library to build a phone and call Restful API to provide sms and other features.

If you prefer something that works out of box yet customizable, please refer to https://github.com/ringcentral/ringcentral-embeddable

The First Step
November 11, 2022

@Embbnux Ji when I try to add conversationPage , I am getting below error. Please suggest if any other dependency need to be updated.


Uncaught TypeError: Cannot read properties of undefined (reading 'getUIProps')

at Function.eval [as mapToProps] (connectModule.js?bdd1:25:1)

at mapToPropsProxy (wrapMapToProps.js?2425:41:1)

at Function.detectFactoryAndVerify (wrapMapToProps.js?2425:50:1)

at mapToPropsProxy (wrapMapToProps.js?2425:41:1)

at handleFirstCall (selectorFactory.js?7906:22:1)

at pureFinalPropsSelector (selectorFactory.js?7906:63:1)

at Object.runComponentSelector [as run] (connectAdvanced.js?fe33:22:1)

at Connect.initSelector (connectAdvanced.js?fe33:182:1)

at new Connect (connectAdvanced.js?fe33:119:1)

at constructClassInstance (react-dom.development.js?61bb:12716:1)

react-dom.development.js?61bb:20085 The above error occurred in the <Connect(ConversationsPanel)> component:


at Connect (webpack-internal:///./node_modules/react-redux/es/components/connectAdvanced.js:126:28)

The First Step
November 15, 2022

@Embbnux Ji @Tyler Liu Any inputs on the above error while adding Messages module . I am adding messages modules like below in containers/App/index.ts file.

<Route

path="/messages"

component={(routerProps) => (

<ConversationsPage

showContactDisplayPlaceholder={false}

showGroupNumberName

/>

)} />