Vue Toast Props

$(function(){
    $("#toastContainer").dxToast({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<template>
    <DxToast ...
        :element-attr="toastAttributes">
    </DxToast>
</template>

<script>
import DxToast from 'devextreme-vue/toast';

export default {
    components: {
        DxToast
    },
    data() {
        return {
            toastAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

import React from 'react';

import Toast from 'devextreme-react/toast';

class App extends React.Component {
    toastAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Toast ...
                elementAttr={this.toastAttributes}>
            </Toast>
        );
    }
}
export default App;

$(function () {
    $("#toastContainer").dxToast({
        // ...
        hideOnOutsideClick: function(e) {
            return e.target === $("#someElement").get()[0];
        }
    });
});

<template>
    <DxToast ....
        :hide-on-outside-click="hideOnOutsideClick">
    </DxToast>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxToast from 'devextreme-vue/toast';

export default {
    components: {
        DxToast
    },
    methods: {
        hideOnOutsideClick (e) {
            return e.target === document.getElementById("someElement");
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import Toast from 'devextreme-react/toast';

const hideOnOutsideClick = (e) => {
    return e.target === document.getElementById("someElement");
};

export default function App() {
    return (
        <Toast ...
            hideOnOutsideClick={hideOnOutsideClick}>
        </Toast>
    );
}

import Toast from 'devextreme-react/toast';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.toastInstance = e.component;
    }

    render() {
        return (
            <div>
                <Toast onInitialized={this.saveInstance} />
            </div>
        );
    }
}

$(function() {
    $("#toastContainer").dxToast({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<template> 
    <DxToast ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxToast from 'devextreme-vue/toast'; 

export default { 
    components: { 
        DxToast
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Toast from 'devextreme-react/toast'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Toast ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

$(function(){
    $("#toastContainer").dxToast({
        // ...
        wrapperAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<template>
    <DxToast ...
        :wrapper-attr="toastAttributes">
    </DxToast>
</template>

<script>
import DxToast from 'devextreme-vue/toast';

export default {
    components: {
        DxToast
    },
    data() {
        return {
            toastAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

import React, { useMemo } from 'react';

import Toast from 'devextreme-react/toast';

function App() {
    const toastAttributes = useMemo(() => {
        return {
            id: 'elementId',
            class: 'class-name'
        }
    }, []);

    return (
        <Toast ...
            wrapperAttr={toastAttributes}>
        </Toast>
    );
}
export default App;

<div id="myToast" class="myClass"></div>

<dx-toast ... class="myClass">
</dx-toast>

<Toast ... className="myClass" />

@(Html.DevExtreme().Toast()...
    .OnInitialized("(e) => e.element.addClass('myClass')")
)

    @(Html.DevExtreme().Toast()...
    .OnInitialized("(e) => e.element.addClass('myClass')")
)