Sets or gets the appendContainer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} appendContainer={'#container'}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoOpen property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} autoOpen={true}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the animationOpenDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} animationOpenDelay={600}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the animationCloseDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} animationCloseDelay={1000}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoClose property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} autoClose={true}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoCloseDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} autoCloseDelay={5000}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the blink property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} blink={true}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the browserBoundsOffset property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} browserBoundsOffset={10}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the closeOnClick property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} closeOnClick={false}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} disabled={true}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} height={200}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the hoverOpacity property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} hoverOpacity={2}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the icon property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} icon={icon}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the notificationOffset property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} notificationOffset={10}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the opacity property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} opacity={1}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the position property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} position={'top-left'}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} rtl={true}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showCloseButton property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} showCloseButton={false}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the template property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} template={'info'}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'} theme={'energyblue'}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the notification is closed.

Code examples

Bind to the close event of jqxNotification.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNotification.on('close', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the notification is clicked.

Code examples

Bind to the click event of jqxNotification.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNotification.on('click', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the notification is opened.

Code examples

Bind to the open event of jqxNotification.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNotification.on('open', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNotification.closeAll();
    }

    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNotification.closeLast();
    }

    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNotification.destroy();
    }

    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNotification.open();
    }

    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNotification.refresh();
    }

    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNotification from 'jqwidgets-react/react_jqxnotification.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNotification.render();
    }

    render() {       
        
        return (
            <JqxNotification ref='myNotification'
                width={250} position={'top-right'}>
                <div>
                    Welcome to our website.
                </div>
            </JqxNotification>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));