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 |