my-react-snackbar

Table of Contents

• 1. Installation
• 2. Usage
• 3. Demo
• 4. Full Example
• 5. Props

1. Installation:

Install my-react-snackbar:

npm install my-react-snackbar --save

or

yarn add my-react-snackbar

2. Usage:

App.js

import SnackBar from 'my-react-snackbar';
<SnackBar open={open} message={'Are you sure you want to delete it?'} />;

3. Demo:

4. Full Example:

App.js

import React from 'react';
import SnackBar from 'my-react-snackbar';
 
function App() {
  var [open, setOpen] = React.useState(false);
 
  return (
    <div>
      <SnackBar
        open={open}
        message={'Are you sure you want to delete it?'}
        position='bottom-center'
        type='warning'
        yesLabel='Ok'
        onYes={() => {}}
      />
    </div>
  );
}
 
export default App;

For more examples and styles please check https://github.com/yamanAbd/react-snackbar/tree/master/examples

5. Props:

Prop name	Description	Type	Default value
open	Required. Status of the snackbar.	boolean	-
message	Required. The Message to display.	String	-
containerStyle	Container style for component.	Object	-
buttonStyle	Style of the yes & no buttons.	Object	-
type	Type of snackbar	'error'| 'success'| 'warning' | 'info'	-
color	Background color of the snackbar when type is not provided.	String	'black'
position	Position of the snack bar.	'top-center'| 'top-right'| 'top-left' | 'bottom-center'| 'bottom-right'|'bottom-left'	'top-center'
yesLabel	Yes button Text.	String	'Yes'
noLabel	No button Text.	String	'No'
onYes	The function to call when yes button is clicked.	Function	-
onNo	The function to call when no button is clicked.	Function	-
timeout	Specify duration of snackbar.	Number	-
closeOnClick	Specify if snackbar will disappear on mousedown	boolean	true