This sample app shows how to build a React chat application using CometChat Pro SDK that will show typing indicator when another user is typing a message
SCREENSHOTS
Jump straight into the code or read the accompanying step-by-step guide here on our blog.
This demo uses:
- React
- CometChat Pro JavaScript SDK
- Typing animation in CSS by Jimmy Yoon
- Download the repository here or run
git clone https://github.com/cometchat-pro-tutorials/react-typing-indicators.git
- In the
react-typing-indicators
directory, runnpm install
- You need to sign up for CometChat PRO and create your application first
- Create an ApiKey. You can use auth-only permission for this application
- Create a Group from the dashboard
- Create a
.env
file in the root folder of the project and paste the following content in it:
REACT_APP_COMETCHAT_API_KEY=YOUR_API_KEY
REACT_APP_COMETCHAT_APP_ID=YOUR_APP_ID
REACT_APP_COMETCHAT_GUID=YOUR_GROUP_GUID
Replace YOUR_API_KEY
, YOUR_APP_ID
and YOUR_GROUP_GUID
with your API KEY, APP ID and GUID as obtained from your CometChat dashboard.
- run
npm start