Environment

Product Version3.0.0
ProductProgress® KendoReact

Description

How to hide the Notification component automatically after a specific timeout.

Solution

Currently, this can be done using the setTimeout function as shown in the example below.

import React from 'react';
import ReactDOM from 'react-dom';

import { Notification, NotificationGroup } from '@progress/kendo-react-notification'
import { Fade } from '@progress/kendo-react-animation'

class App extends React.Component {
  state = { success: false };
  onToggle = flag => {
    this.setState({ success: !this.state.success });
    if(!this.state.success){
      setTimeout(()=>{
        this.setState({ success: false });
      },3000)
    }
  }

  render() {
    const { success } = this.state;

    return (
      <React.Fragment>
        <button
          className="k-button"
          onClick={() => this.onToggle('success')}
        >
          {(success ? 'hide ' : 'show ') + 'Success'}
        </button>

        <NotificationGroup
          style={{
            right: 0,
            bottom: 0,
            alignItems: 'flex-start',
            flexWrap: 'wrap-reverse'
          }}
        >
          <Fade enter={true} exit={true}>
            {success && <Notification
              type={{ style: 'success', icon: true }}
              closable={true}
              onClose={() => this.setState({ success: false })}
            >
              <span>Your data has been saved.</span>
            </Notification>}
          </Fade>
        </NotificationGroup>
      </React.Fragment>
    );
  }
}

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

Also, there is a feature request for this in our portal and I can suggest voting for it as it will increase its chances to be implemented as a built-in feature:

https://feedback.telerik.com/kendo-react-ui/1413293-add-hideafter-prop-to-the-notification-component

 /