Skip to main content

SnackbarBase

Reusable Snackbar component

Example​

import {
  Button,
  createStyles,
  IPosition,
  SnackbarBase,
  Typography,
  usePopups,
  useStyles,
  View,
} from '@lad-tech/mobydick-core';

export const SnackbarWidget = () => {
  const [styles] = useStyles(styleFn);
  const {openPopup} = usePopups();
  return (
    <View style={styles.container}>
      <Typography font={'Regular-Primary-H5'}>Snackbar</Typography>
      <Button
        text={'Snackbar top'}
        onPress={() =>
          openPopup({
            Content: props => (
              <SnackbarBase {...props} position={IPosition.top}>
                <SnackbarBase.Title title={'Snackbar top title'} />
              </SnackbarBase>
            ),
          })
        }
      />
      <Button
        text={'Snackbar bottom'}
        onPress={() =>
          openPopup({
            Content: props => (
              <SnackbarBase {...props} position={IPosition.bottom}>
                <SnackbarBase.Title title={'Snackbar bottom title'} />
              </SnackbarBase>
            ),
          })
        }
      />
    </View>
  );
};

const styleFn = createStyles(({spaces}) => ({container: {gap: spaces.Space8}}));

Props​

IPopup Props​

Inherits IPopup Props except 'Content'

Required
onClose​

TYPE
() => void

Function for close snackbar

Required
position​

TYPE
position

Position for snackbar

overlayStyle​

TYPE
ViewStyle

Custom styles for PopupBase

containerStyle​

TYPE
ViewStyle

Custom styles for container snackbar

timeShow​

TYPE
number

Timer for show snackbar

Componetns​

Title​

See Title