grungnet/src/components/Toast.js
2020-10-27 18:25:50 +11:00

32 lines
673 B
JavaScript

import React from "react";
import { Box, Text } from "theme-ui";
import { ToastProvider as DefaultToastProvider } from "react-toast-notifications";
function CustomToast({ children }) {
return (
<Box
m={2}
mb={0}
bg="overlay"
sx={{ borderRadius: "4px", padding: "12px 16px" }}
>
<Text as="p" variant="body2">
{children}
</Text>
</Box>
);
}
export function ToastProvider({ children }) {
return (
<DefaultToastProvider
components={{ Toast: CustomToast }}
autoDismiss={true}
autoDismissTimeout={2000}
placement="bottom-center"
>
{children}
</DefaultToastProvider>
);
}