Positioning

You can configure the position of the Notification through the style property of the NotificationGroup component.

The following example demonstrates how to align the Notification to the browser viewport.

import React from 'react';
import ReactDOM from 'react-dom';
import { Notification, NotificationGroup } from '@progress/kendo-react-notification';

const position = {
    topLeft: { top: 0, left: 0, alignItems: 'flex-start' },
    topCenter: { top: 0, left: '50%', transform: 'translateX(-50%)' },
    topRight: { top: 0, right: 0, alignItems: 'flex-end' },
    bottomLeft: { bottom: 0, left: 0, alignItems: 'flex-start' },
    bottomCenter: { bottom: 0, left: '50%', transform: 'translateX(-50%)' },
    bottomRight: { bottom: 0, right: 0, alignItems: 'flex-end' }
};

class App extends React.Component {
    render() {
        const content = <span>Your data has been saved.</span>;
        const notifications = [
            <Notification key="success" type={{ style: 'success', icon: true }}>{content}</Notification>,
            <Notification key="info" type={{ style: 'info' }}>{content}</Notification>
        ];

        return (
            <React.Fragment>
                <NotificationGroup style={position.topLeft}>
                    {notifications}
                </NotificationGroup>

                <NotificationGroup style={position.bottomLeft}>
                    {notifications}
                </NotificationGroup>

                <NotificationGroup style={position.topCenter}>
                    {notifications}
                </NotificationGroup>

                <NotificationGroup style={position.bottomCenter}>
                    {notifications}
                </NotificationGroup>

                <NotificationGroup style={position.topRight}>
                    {notifications}
                </NotificationGroup>

                <NotificationGroup style={position.bottomRight}>
                    {notifications}
                </NotificationGroup>
            </React.Fragment>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /