Search results

Getting started with React Message component

02 Feb 2023 / 3 minutes to read

This article provides a step-by-step introduction to get started with the Syncfusion React Message component.

Prerequisites

System requirements for Syncfusion React UI components

Dependencies

The following list of dependencies are required to use the Message component in the application.

Copied to clipboard
|-- @syncfusion/ej2-react-notifications
  |-- @syncfusion/ej2-base
  |-- @syncfusion/ej2-buttons
  |-- @syncfusion/ej2-popups
  |-- @syncfusion/ej2-notifications
  |-- @syncfusion/ej2-react-base

Create the React application

To set-up, a React application, choose any of the following ways. The best and easiest way is to use the create-react-app. It sets up the development environment in JavaScript and improvises the application for production. Refer to the installation instructions of the create-react-app.

Copied to clipboard
npx create-react-app my-app
cd my-app
npm start

or

Copied to clipboard
yarn create react-app my-app
cd my-app
yarn start

To set-up a React application in the TypeScript environment, run the following command.

Copied to clipboard
npx create-react-app my-app --template typescript
cd my-app
npm start

Besides using the npx package runner tool, also create an application from the npm init. To begin with the npm init, upgrade the npm version to npm 6+.

Copied to clipboard
npm init react-app my-app
cd my-app
npm start

Add Syncfusion React packages

Once you have created the React application, install the required Syncfusion React component package in the application. All Syncfusion React (Essential JS 2) packages are published on the npmjs.com public registry.

To install the Message component package, use the following command.

Copied to clipboard
npm install @syncfusion/ej2-react-notifications --save

or

Copied to clipboard
yarn add @syncfusion/ej2-react-notifications

Also, check out the installation section to know the different ways of installing the packages.

Import the Syncfusion CSS styles

After installing the Syncfusion component packages in the application, import the required themes based on the components used.

The Syncfusion React component comes with built-in themes, which are available in installed packages. It is quite simple to adapt the Syncfusion React components based on the application style by referring to any of the built-in themes. Import the Material theme for the Message component.

Import the CSS styles for the Message component and its dependencies in the src/App.css. file.

Copied to clipboard
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-react-notifications/styles/material.css';

Check out the Themes topic to know more about built-in themes and different ways to refer to themes in React applications.

Add Message component to the application

Start adding the required components to the application. Add the Message component in the src/App.tsx file using the following code.

  • Before adding the Message component to the markup, import the Message component in the src/App.tsx file.
Copied to clipboard
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
  • Then, add the Message component in the application using the following code sample.
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';

function App() {
  return (<MessageComponent content="Please read the comments carefully"></MessageComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

Run the application

All are set. Now, run the application using the following command.

Copied to clipboard
npm start

or

Copied to clipboard
 yarn start

The output will appear as follows.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
function App() {
    return (<MessageComponent content="Please read the comments carefully"></MessageComponent>);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Message</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-notifications/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
    <style>
        /* Sample level styles */
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .e-message {
            margin: 100px;
        }
    </style>
</body>

</html>
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';

function App() {
  return (<MessageComponent content="Please read the comments carefully"></MessageComponent>);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);