Hi I am trying to create a snackbar using material ui. React version = 0.14 Material-ui version =0.15.0
I couldn't find anything suitable for this version of React so I decided to use material-ui. It works but only opens at the bottom of the screen. How can I change this? For example how can I get the top right.
My Code :
import Snackbar from 'material-ui/Snackbar';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
this.state = {
open: false,
};
handleTouchTap = () => {
this.setState({
open: true,
});
};
handleRequestClose = () => {
this.setState({
open: false,
});
};
<div>
<button
onClick={this.handleTouchTap}>
SHOW NOTIFICATION
<button>
<Snackbar
open={this.state.open}
message="Event added to your calendar"
autoHideDuration={4000}
onRequestClose={this.handleRequestClose}
/>
</div>
Image is here : [Notification image1
Just add anchorOrigin to update position:
<Snackbar
...
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
/>