Skip to main content

Snackbar

Snackbars provide brief messages about app processes. The component is also known as a toast.

Usage​

import React from 'react';
import {  Snackbar , Alert } from 'qdm-component-library';

function App() {
  return ( 
      <Snackbar   
      open={true}
      anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'right',
      }}
      action={<Alert severity="success"
      onClose={() => HandleAlertOpen()}>
      This is a success message!
      </Alert>}
      />
   );
}
export default App;

Reference​

Props​

here all the list of Props you can use for Snackbar Component

open​

props for adding the Snackbar and if the boolean true the Snackbar appears

import React from 'react';
import {  Snackbar } from 'qdm-component-library';

function App() {
  return ( 
      <Snackbar   
      open={true}
      />
   );
}
export default App;

anchorOrigin​

The anchor of the Snackbar

vertical​

In Qdm Component we provide 2 types of vertical.

  • bottom
  • top

horizontal​

In Qdm Component we provide 3 types of horizontal.

  • left
  • right
  • center
import React from 'react';
import {  Snackbar , Alert } from 'qdm-component-library';

function App() {
  return ( 
      <Snackbar   
      open={true}
      anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'right',
      }}
      action={<Alert severity="success"
      onClose={() => HandleAlertOpen()}>
      This is a success message!
      </Alert>}
      />
   );
}
export default App;

action​

The usage of action is to use customise components inside the Snackbar

import React from 'react';
import {  Snackbar , Alert } from 'qdm-component-library';

function App() {
  return ( 
      <Snackbar   
      open={true}
      anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'right',
      }}
      action={<Alert severity="success"
      onClose={() => HandleAlertOpen()}>
      This is a success message!
      </Alert>}
      />
   );
}
export default App;

message​

The usage of message is to show simple text message inside the Snackbar,it is a string

import React from 'react';
import {  Snackbar  } from 'qdm-component-library';

function App() {
  return ( 
      <Snackbar   
      open={true}
      anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'right',
      }}
      message={"Bottom To Right snackbar"}
      />
   );
}
export default App;

autoHideDuration​

The number of milliseconds to wait before automatically calling the onClose function. If you need time duration to set the default value as what you required.

import React from 'react';
import {  Snackbar } from 'qdm-component-library';

function App() {
  return ( 
      <Snackbar   
      open={true}
      anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'right',
      }}
      message={"Bottom To Right snackbar"}
      autoHideDuration={5000}
      />
   );
}
export default App;

onClose​

props give addition props to close the Snackbar, its elements type is function

inLineStyles​

props give addition props to the alert element type Object