Animations

The Notification allows you to add opening and closing animations to it by using the KendoReact Animation components from the @progress/kendo-react-animation package.

To animate the Notification, wrap it in the desired KendoReact Animation component.

<style>
    .k-notification-container {
        margin: 6px;
    }
</style>
// import { Slide } from '@progress/kendo-react-animation';

class App extends React.Component {
    state = { success: false, error: false, warning: false, info: false, none: false };
    onToggle = (flag) => this.setState({ [flag]: !this.state[flag] });

    render() {
        const { success, error, warning, info, none } = this.state;

        return (
            <React.Fragment>
                <button
                    className="k-button"
                    onClick={() => this.onToggle('success')}
                >
                    {(success ? 'hide ' : 'show ') + 'Success'}
                </button>
                &nbsp;
                <button
                    className="k-button"
                    onClick={() => this.onToggle('error')}
                >
                    {(error ? 'hide ' : 'show ') + 'Error'}
                </button>
                &nbsp;
                <button
                    className="k-button"
                    onClick={() => this.onToggle('warning')}
                >
                    {(warning ? 'hide ' : 'show ') + 'Warning'}
                </button>
                &nbsp;
                <button
                    className="k-button"
                    onClick={() => this.onToggle('info')}
                >
                    {(info ? 'hide ' : 'show ') + 'Info'}
                </button>
                <button
                    className="k-button"
                    onClick={() => this.onToggle('none')}
                >
                    {(none ? 'hide ' : 'show ') + 'Unstyled'}
                </button>
                <NotificationGroup
                    style={{
                        right: 0,
                        bottom: 0,
                        alignItems: 'flex-start',
                        flexWrap: 'wrap-reverse'
                    }}
                >
                    <Slide direction={success ? 'up' : 'down'}>
                        {success && <Notification
                            type={{ style: 'success', icon: true }}
                            closable={true}
                            onClose={() => this.setState({ success: false })}
                        >
                            <span>Your data has been saved.</span>
                        </Notification>}
                    </Slide>
                    <Slide direction={error ? 'up' : 'down'}>
                        {error && <Notification
                            type={{ style: 'error', icon: true }}
                            closable={true}
                            onClose={() => this.setState({ error: false })}
                        >
                            <span>Oops! Something went wrong ...</span>
                        </Notification>}
                    </Slide>
                    <Slide direction={warning ? 'up' : 'down'}>
                        {warning && <Notification
                            type={{ style: 'warning', icon: true }}
                            closable={true}
                            onClose={() => this.setState({ warning: false })}
                        >
                            <span>Your password will expire in 2 days!</span>
                        </Notification>}
                    </Slide>
                    <Slide direction={info ? 'up' : 'down'}>
                        {info && <Notification
                            type={{ style: 'info', icon: true }}
                            closable={true}
                            onClose={() => this.setState({ info: false })}
                        >
                            <span>You have 1 new message!</span>
                        </Notification>}
                    </Slide>
                    <Slide direction={none ? 'up' : 'down'}>
                        {none && <Notification
                            type={{ style: 'none', icon: false }}
                            closable={true}
                            onClose={() => this.setState({ none: false })}
                            style={{ overflow: 'visible' }}
                        >
                            <span>Hanna Moos likes your status.</span>
                        </Notification>}
                    </Slide>
                </NotificationGroup>
            </React.Fragment>
        );
    }
}

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

In this article

 /