If set, specifies the notification container. The value of appendContainer should be a string with the id of the container element preceeded by "#".

Sets or gets whether the notification will open automatically.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the duration of the notification animation at open.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} animationOpenDelay={600}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the duration of the tooltip animation at close.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} animationCloseDelay={1000}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the notification will automatically close after duration equal to the autoCloseDelay property.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} autoClose={false}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the duration after which the notification automatically closes (works only if the autoClose property is set to true).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} autoCloseDelay={5000}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the notification blinks when opened.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} blink={true}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the notifications' offset from the window bounds.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} browserBoundsOffset={10}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the notification will close if it is clicked.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} closeOnClick={false}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the notification is disabled (it cannot be opened).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} disabled={true}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the notification's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} height={200}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the notification's opacity when it is hovered with the mouse.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} hoverOpacity={0.3}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets an object which specifies a custom notification icon. The icon property is disregarded if template is set.

width

height

url

padding - specifies the distance from the icon to the content.

Sets or gets the offset between notifications.

Sets or gets the notification's opacity.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} opacity={1}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the part of the browser window where the notifications will be positioned. The position property is disregarded if appendContainer is set.

'top-left'

'top-right'

'bottom-left'

'bottom-right'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} position={'top-left'}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} rtl={true}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether to show the notification's close button.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} showCloseButton={false}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the notification template.

'info'

'warning'

'success'

'error'

'mail'

'time'

null

If template is set to null, the theme setting is applied to the notification. In that case, the notification icon can be set with the icon property.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} template={'success'}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} theme={'material'}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the notification's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true} width={200}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the notification is closed.

Code examples

Bind to the close event of jqxNotification.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} onClose={this.onClose} 
        autoOpen={true}>
        Sample Notification
      </JqxNotification>
    );
  }
 
  private onClose(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the notification is clicked.

Code examples

Bind to the click event of jqxNotification.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} onClick={this.onClick} 
        autoOpen={true}>
        Sample Notification
      </JqxNotification>
    );
  }
 
  private onClick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the notification is opened.

Code examples

Bind to the open event of jqxNotification.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();  
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} onOpen={this.onOpen} 
        autoOpen={true}>
        Sample Notification
      </JqxNotification>
    );
  }
 
  private onOpen(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Closes all notification instances.

Closes the last notification instances.

Destroys the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();
 
  public componentDidMount(): void {
    this.myNotification.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Opens the widget.

Refreshes the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();
 
  public componentDidMount(): void {
    this.myNotification.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Renders the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
 
class App extends React.PureComponent<{}, INotificationProps> {
  private myNotification = React.createRef<JqxNotification>();
 
  public componentDidMount(): void {
    this.myNotification.current!.render();
  }
   
  
  public render() {
    return (
      <JqxNotification ref={this.myNotification} 
        autoOpen={true}>
        Sample Notification
      </JqxNotification>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);