1.0.4 • Published 4 years ago
my-react-snackbar v1.0.4
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 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 |