JSPM – my-react-snackbar@1.0.4

Package Exports

my-react-snackbar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (my-react-snackbar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

1. Installation:

Install my-react-snackbar:

npm install my-react-snackbar --save

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

my-react-snackbar