react-native-paper-snackbar-stack v0.2.0
react-native-paper-snackbar-stack
This library is a React native library which allows you to use react-native-paper snackbar component with great functionality.
Installation
npm:
npm install react-native-paper-snackbar-stack
yarn:
yarn add react-native-paper-snackbar-stack
Usage
Wrap your root component in SnackbarProvider from react-native-paper-snackbar-stack. While it uses react-native-paper, it also requires Provider from react-native-paper to wrap itself.
import { SnackbarProvider } from 'react-native-paper-snackbar-stack';
import * as React from 'react';
import { Provider } from 'react-native-paper';
export default function App() {
return (
<Provider>
<SnackbarProvider maxSnack={2}>{/** Body component*/}</SnackbarProvider>
</Provider>
);
}
Now, useSnackbar can be used in the body of the SnackbarProvider.
import { useSnackbar } from 'react-native-paper-snackbar-stack';
import { Button } from 'react-native-paper';
export default function SnackbarTest() {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const [snackbarId, setSnackbarId] = useState('');
const handleOpenSnackbar = () => {
const id = enqueueSnackbar({
message: 'This is an example snackbar',
variant: 'info',
});
setSnackbarId(id);
};
const handleCloseSnackbar = () => {
closeSnackbar(snackbarId);
};
return (
<View>
<Button onPress={handleOpenSnackbar}>Show</Button>
<Button onPress={handleCloseSnackbar}>Close</Button>
</View>
);
}
SnackbarProvider Props
children
The part that can access all functionalities of the package.
Type:
React.ReactNode
maxSnack
Maximum number of displayed snackbars at a time.
Type:
number
Default:
1
and
Common Props
enqueueSnackbar Options
message
The string that is displayed in the snackbar
Type:
string
duration
The number of milliseconds to close snackbar automatically
Type:
number
action
The action button that will be shown on the right of the message. It will close the snackbar on pressed.
Type:
SnackbarProps['action']
and
Common Props
closeSnackbar Options
key
The unique identifier for a snackbar. It is returned from
enqueueSnackbar
call.
Common Props
variant
Prestyled snackbar variants
Type:
'default' | 'success' | 'error' | 'warning'
Default:
'default'
vertical
Vertical position of the snackbar.
Type:
'bottom' | 'top'
Default:
'bottom'
horizontal
Horizontal position of the snackbar.
Type:
'left' | 'center' | 'right'
Default:
'center'
transition
transition effect when snackbar opens/closes
Type:
'fade' | 'slide' | 'zoom'
Default:
'fade'
Example App
To use example app in expo go, scan the qr code in the mobile device.
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library