To install:
npm i react-dynamic-sheet
or yarn add react-dynamic-sheet
Styleguide: https://rsoury.github.io/react-dynamic-sheet/
React Dynamic Sheet is react component to provide mobile users an app like, swipeable Bottom Sheet and desktop users a Modal Dialog.
import DynamicSheet from 'react-dynamic-sheet';
import { EntryButton, Box } from './your-components/'
const App = () => {
const [checkout, setCheckout] = useState(false);
const abort = () => setCheckout(false);
const startCheckout = () => setCheckout(true);
const confirmClose = true;
return (
<>
<DynamicSheet
isOpen={checkout}
onClose={abort}
confirmClose={confirmClose}
>
<Box sx={{ padding: "200px 40px" }}>Hello Checkout</Box>
</DynamicSheet>
<EntryButton onClick={startCheckout} />
</>
);
}