1.0.4 • Published 4 years ago

my-react-snackbar v1.0.4

Weekly downloads
40
License
ISC
Repository
github
Last release
4 years ago

Table of Contents

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 nameDescriptionTypeDefault value
openRequired. Status of the snackbar.boolean-
messageRequired. The Message to display.String-
containerStyleContainer style for component.Object-
buttonStyleStyle of the yes & no buttons.Object-
typeType of snackbar'error'| 'success'| 'warning' | 'info'-
colorBackground color of the snackbar when type is not provided.String'black'
positionPosition of the snack bar.'top-center'| 'top-right'| 'top-left' | 'bottom-center'| 'bottom-right'|'bottom-left''top-center'
yesLabelYes button Text.String'Yes'
noLabelNo button Text.String'No'
onYesThe function to call when yes button is clicked.Function-
onNoThe function to call when no button is clicked.Function-
timeoutSpecify duration of snackbar.Number-
closeOnClickSpecify if snackbar will disappear on mousedownbooleantrue