Example: React Integration
Relevant source files
The following files were used as context for generating this wiki page:The react-demo application serves as a practical example of how to integrate the @messagejs/client SDK into a standard React application. It demonstrates the fundamental workflow: initializing the SDK, capturing user input via state management, and triggering an API call to send a message. This example provides a clear, minimal implementation for developers looking to use MessageJS in a frontend React environment.
The demo is a simple form with inputs for a phone number and a message, a "Send" button, and an area to display the result of the send operation. It highlights the core init() and sendMessage() methods from the client SDK.
Sources: packages/examples/README.md, packages/examples/react-demo/src/App.tsx
Project Setup and Dependencies
The React demo is built using Vite and TypeScript. The core dependencies for this integration are react, react-dom, and the @messagejs/client SDK itself.
| Dependency | Version | Description |
|---|---|---|
@messagejs/client | * | The official MessageJS client SDK for browser and Node.js environments. |
react | ^18.2.0 | The core React library for building the user interface. |
react-dom | ^18.2.0 | Provides DOM-specific methods for React. |
vite | ^5.0.0 | The build tool and development server for the demo application. |
typescript | ^5.3.3 | Provides static typing for the project. |
Sources: packages/examples/react-demo/package.json:14-23
To run the demo, a developer would navigate to the react-demo directory, install dependencies, and run the development server.
cd react-demo
npm install
npm run dev
Sources: packages/examples/README.md:7-9
Component Architecture
The entire demo is encapsulated within a single React component, App.tsx. It uses functional component patterns and React hooks for state management.
Sources: packages/examples/react-demo/src/App.tsx:4
State Management
The component utilizes the useState hook to manage three pieces of state: the recipient's phone number, the message content, and the result of the API call.
| State Variable | Type | Initial Value | Description |
|---|---|---|---|
message | string | '' | Stores the content of the message from the <textarea>. |
phone | string | '' | Stores the recipient's phone number from the <input>. |
result | string | null | null | Stores the success or error message to be displayed to the user after a send attempt. |
Sources: packages/examples/react-demo/src/App.tsx:5-7
User Interface (UI)
The JSX returned by the App component renders a simple form structure:
- An
<h1>title:MessageJS React Demo. - An
<input type="tel">for the phone number, bound to thephonestate. - A
<textarea>for the message content, bound to themessagestate. - A
<button>that triggers thehandleSendfunction on click. - A
<p>tag that conditionally renders the content of theresultstate.
Sources: packages/examples/react-demo/src/App.tsx:24-38
Data Flow and SDK Usage
The core logic resides in the handleSend asynchronous function, which orchestrates the interaction with the MessageJS client SDK.
handleSend Function
This diagram illustrates the flow of control within the App component when the user clicks the "Send" button.
This flowchart shows the internal logic of the handleSend function, from SDK initialization to state updates based on the API response.
Sources: packages/examples/react-demo/src/App.tsx:9-22
SDK Interaction Sequence
The handleSend function performs two key interactions with the @messagejs/client SDK.
-
Initialization (
init): The SDK is initialized with a hardcoded demo API key:'sk_live_demo_key'. In a real application, this should be an environment variable. Theinitmethod configures the SDK with the necessary credentials.
Sources: packages/examples/react-demo/src/App.tsx:10, packages/client/src/index.ts:70-82 -
Sending a Message (
sendMessage): ThesendMessagemethod is called with a payload object. This triggers aPOSTrequest to the/messagesendpoint of the MessageJS API.
Sources: packages/examples/react-demo/src/App.tsx:13-18, packages/client/src/index.ts:89-122
The following sequence diagram details the interaction between the React component, the SDK, and the backend API.
This diagram shows the sequence of events from a user action in the UI to the API call made by the SDK and the final feedback loop to the user.
Sources: packages/examples/react-demo/src/App.tsx:9-22, packages/client/src/index.ts:89-122, API_REFERENCE.md:73-97
sendMessage Payload
The sendMessage function in the demo is called with a specific payload structure defined by the SendParams interface in the client SDK.
// packages/examples/react-demo/src/App.tsx:13-18
const response = await messagejs.sendMessage({
connectorId: 'conn_whatsapp',
templateId: 'tpl_demo',
to: phone,
variables: { message }
});
| Parameter | Value in Demo | Description |
|---|---|---|
connectorId | 'conn_whatsapp' | The ID of the connector configuration to use. |
templateId | 'tpl_demo' | The ID of the message template to use. |
to | phone (state) | The recipient's identifier (phone number). |
variables | { message } (state) | Key-value pairs to replace variables in the template. |
Sources: packages/examples/react-demo/src/App.tsx:14-18, packages/client/src/index.ts:30-54
Upon a successful API call, the response object contains messageId and status, which are then used to update the component's result state. If the call fails (due to a network error or an API error response), the catch block updates the result state with the error message.
Sources: packages/examples/react-demo/src/App.tsx:19-21, packages/client/src/index.ts:56-70