Overview
The BottomSheet component provides a slide-up panel interface, commonly used in mobile applications for actions, menus, or additional content.
Basic Usage
import BottomSheet from '@newtonschool/grauity';
import { useState } from 'react';
function MyComponent() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button onClick={() => setIsOpen(true)}>Open Bottom Sheet</Button>
<BottomSheet
isOpen={isOpen}
onClose={() => setIsOpen(false)}
height="50%"
showDragHandle={true}
>
<h2>Bottom Sheet Content</h2>
<p>Your content goes here</p>
</BottomSheet>
</>
);
}
Controls whether the bottom sheet is visible.
Callback function when the bottom sheet should be closed.
Height of the bottom sheet.
Make the bottom sheet take up the full screen.
Display a drag handle at the top of the bottom sheet.
Close the bottom sheet when pulled down.
Close the bottom sheet when clicking outside of it.
shouldFocusOnFirstElement
Automatically focus the first focusable element when opened.
Disable background scrolling when bottom sheet is open.
Content to display inside the bottom sheet.
Additional CSS class name.
Custom Height
<BottomSheet
isOpen={isOpen}
onClose={onClose}
height="70%"
>
<p>Bottom sheet with custom height</p>
</BottomSheet>
Full Screen
<BottomSheet
isOpen={isOpen}
onClose={onClose}
fullScreen={true}
>
<h2>Full Screen Content</h2>
<p>This bottom sheet takes up the entire screen</p>
</BottomSheet>
Without Drag Handle
<BottomSheet
isOpen={isOpen}
onClose={onClose}
showDragHandle={false}
>
<p>No drag handle shown</p>
</BottomSheet>
Disable Pull to Close
<BottomSheet
isOpen={isOpen}
onClose={onClose}
closeOnPullDown={false}
>
<p>Must use close button to dismiss</p>
<Button onClick={onClose}>Close</Button>
</BottomSheet>
Action Sheet Example
<BottomSheet
isOpen={isOpen}
onClose={onClose}
height="auto"
>
<div style={{ padding: '20px' }}>
<NSTypography variant="heading-sb-h5">Choose an action</NSTypography>
<Button fullWidth variant="tertiary" onClick={handleEdit}>
Edit
</Button>
<Button fullWidth variant="tertiary" onClick={handleShare}>
Share
</Button>
<Button fullWidth variant="tertiary" color="error" onClick={handleDelete}>
Delete
</Button>
</div>
</BottomSheet>