News & Announcements User Community Developer Community

Welcome to the RingCentral Community

Please note the community is currently under maintenance and is read-only.

Search
Make sure to review our Terms of Use and Community Guidelines.
  Please note the community is currently under maintenance and is read-only.
Home » Developers
How to use RingCentral and Reactjs?
Tags: sdk
May 3, 2017 at 3:27pm   •   5 replies  •  0 likes
guilherme-falcao

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.

5 Answers
answered on Nov 11, 2022 at 6:28am  

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


 0
on Nov 15, 2022 at 1:02am   •  0 likes

@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

/>

)} />

on Nov 15, 2022 at 5:20pm   •  0 likes

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

on Nov 16, 2022 at 10:26pm   •  0 likes

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 },

on Nov 17, 2022 at 12:52am   •  0 likes

Hi @Ext 45211 I got the issue. As you only added code in tutorial messages section, there are some dependencies missed in previous sections.

You can follow this commit to add all related dependencies https://github.com/embbnux/rc-widgets-cli-test/commit/8e279c542b41a6c24d295e5ea75108a82b4a4114

on Nov 17, 2022 at 12:56am   •  0 likes

@Embbnux Ji Great. Thanks for the quick reply. Will test.

answered on Nov 8, 2022 at 9:48pm  

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.


 0
on Nov 9, 2022 at 8:51am   •  0 likes

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

on Nov 9, 2022 at 9:00am   •  0 likes

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.

on Nov 9, 2022 at 8:02pm   •  0 likes

Hi @Ext 45211 the cli template is outdated, I am going to update it. For now, we can build from the widgets demo source code https://github.com/ringcentral-tutorials/ringcentral-widgets-demo. It has yarn lock file to avoid some broken changes in sub dependences.

on Nov 11, 2022 at 12:32am   •  0 likes

Thanks @Embbnux Ji . While I am testing the demo project app with one of my sandbox account, I am able to login and after clicking on authorize button, it closed the login window and on the parent window, it keep on asing the below login window.

login.png

on Nov 11, 2022 at 7:51am   •  0 likes

I believe it is because you specified wrong clientId/clientSecret. Please double check.

on Nov 11, 2022 at 12:28am   •  0 likes

hi @Ext 45211 ringcentral-widgets-cli tool has updated. You need to updated to 0.4.1 and re-init the project.

on Nov 11, 2022 at 1:10am   •  0 likes

Thanks with latest ringcentral-widgets-cli , I am able to generate the new project and able to login successfully.

on Nov 9, 2022 at 9:15am   •  0 likes

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.

on Nov 9, 2022 at 9:20am   •  0 likes

Thanks you. I will wait for his response. Are these libraries maintained by ring central? Can we implement enterprise production projects based on these libraries ? or do you suggest write from scratch using APIs?

on Nov 9, 2022 at 9:35am   •  0 likes

https://github.com/ringcentral/ringcentral-embeddable is pretty good and stable. it provides most of the features our of box. And you can disable features that you do not need.

answered on Nov 8, 2022 at 12:15am  

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


 0
on Nov 8, 2022 at 8:48am   •  0 likes

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.

answered on Feb 15, 2021 at 4:35am  

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


 0
answered on May 3, 2017 at 6:10pm  
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.

 1



A new Community is coming to RingCentral!

Posts are currently read-only as we transition into our new platform.

We thank you for your patience
during this downtime.

Try Workflow Builder

Did you know you can easily automate tasks like responding to SMS, team messages, and more? Plus it's included with RingCentral Video and RingEX plans!

Try RingCentral Workflow Builder

PRODUCTS
RingEX
Message
Video
Phone
OPEN ECOSYSTEM
Developer Platform
APIs
Integrated Apps
App Gallery
Developer support
Games and rewards

RESOURCES
Resource center
Blog
Product Releases
Accessibility
QUICK LINKS
App Download
RingCentral App login
Admin Portal Login
Contact Sales
© 1999-2024 RingCentral, Inc. All rights reserved. Legal Privacy Notice Site Map Contact Us