question

guilherme-falcao5325 avatar image
guilherme-falcao5325 asked Ext 45211 commented

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.

sdk
1 |3000

Up to 8 attachments (including images) can be used with a maximum of 1.0 MiB each and 10.0 MiB total.

Tyler Liu avatar image
Tyler Liu answered Tyler Liu commented
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.
2 comments
1 |3000

Up to 8 attachments (including images) can be used with a maximum of 1.0 MiB each and 10.0 MiB total.

guilherme-falcao5325 avatar image guilherme-falcao5325 commented ·
Thank you, Tyler. I've tried this one, but either I'm doing something wrong or the project is not working well. I wasn't able to make a simple call. 
But I will give it another shot. 
Thank you.
0 Likes 0 ·
Tyler Liu avatar image Tyler Liu ♦ commented ·
If you have any issue getting started with that project, please create a GitHub issue and provide as much information as possible. Such as sample code you have tried and error messages you encountered.
0 Likes 0 ·
maddy mys avatar image
maddy mys answered

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

1 |3000

Up to 8 attachments (including images) can be used with a maximum of 1.0 MiB each and 10.0 MiB total.

Ext 45211 avatar image
Ext 45211 answered Tyler Liu commented

@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.

1 comment
1 |3000

Up to 8 attachments (including images) can be used with a maximum of 1.0 MiB each and 10.0 MiB total.

Tyler Liu avatar image Tyler Liu ♦ commented ·

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.

0 Likes 0 ·
Ext 45211 avatar image
Ext 45211 answered Tyler Liu commented

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.

10 comments
1 |3000

Up to 8 attachments (including images) can be used with a maximum of 1.0 MiB each and 10.0 MiB total.

Tyler Liu avatar image Tyler Liu ♦ commented ·

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

0 Likes 0 ·
Ext 45211 avatar image Ext 45211 Tyler Liu ♦ commented ·

Thanks @Tyler Liu I was trying with the https://github.com/ringcentral/ringcentral-js-widgets and it has the documentation of how to create the project using ringcentrla widgets cli. Is this project not stable as I am getting error while running the project after generating using CLI.

0 Likes 0 ·
Tyler Liu avatar image Tyler Liu ♦ Ext 45211 commented ·

I have pinged the author of the widgets library to let him provide update here.

I see that it hasn't got any recently updates (except those version bumps and simple changes). So maybe it's kind of out-of-date.

0 Likes 0 ·
Show more comments
Show more comments
Ext 45211 avatar image
Ext 45211 answered Ext 45211 commented

@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)

5 comments
1 |3000

Up to 8 attachments (including images) can be used with a maximum of 1.0 MiB each and 10.0 MiB total.

Ext 45211 avatar image Ext 45211 commented ·

@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

/>

)} />

0 Likes 0 ·
Embbnux Ji avatar image Embbnux Ji Ext 45211 commented ·

Hi @Ext 45211 Do you add those modules into modules/Phone file? the error show that Conversations module is not added. https://github.com/ringcentral-tutorials/ringcentral-widgets-demo/blob/master/src/modules/Phone/index.js#L59
You can get full demo code from here https://github.com/ringcentral-tutorials/ringcentral-widgets-demo

0 Likes 0 ·
Ext 45211 avatar image Ext 45211 Embbnux Ji commented ·

Hi @Embbnux Ji . Yes I did add the conversations module. I have started the new project by generating it using the latest CLI after you fixed. Once generate, I have added the messages section which is failing due to the above error. Please suggest.

{ provide: 'Conversations', useClass: Conversations },

0 Likes 0 ·
Show more comments

Developer sandbox tools

Using the RingCentral Phone for Desktop, you can dial or receive test calls, send and receive test SMS or Fax messages in your sandbox environment.

Download RingCentral Phone for Desktop:

Tip: switch to the "sandbox mode" before logging in the app:

  • On MacOS: press "fn + command + f2" keys
  • On Windows: press "Ctrl + F2" keys