Package Exports

mui-bottom-sheet

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mui-bottom-sheet) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`mui-bottom-sheet`

👆 A delightful bottom sheet component for react up to material design spec

The bottom sheet in the Google Maps app for a location is really nice. I set out to recreate that level of UX detail with a modern BottomSheet for React. Try it in the storybook.

Bottom Sheet Demo

Under the hood it uses react-spring for delightful animations and react-use-gesture to handle dragging. This is still a work in progress - let me know features you'd like and I'll add them in.

Installation

yarn add mui-bottom-sheet

Usage

import React from 'react';
import { BottomSheet } from 'mui-bottom-sheet';

export const App = () => {
  return <BottomSheet>Add your content here</BottomSheet>;
};

Props (options)

prop	type	description	default
`backdrop`	`boolean?`	Whether to show the transparent backdrop that fades in as you pull up.	`true`
`background`	`React.ReactElement?`	Background element that slides up behind the main bottom sheet.	`null`
`currentIndex`	`number?`	Pass in an index to control which stop height the sheet is at. Number should be in range of total stops: `[defaultHeight, ...peekHeights, fullHeight?]`.	`undefined`
`defaultHeight`	`number?`	Default height when the sheet is closed.	`100`
`hidden`	`boolean?`	When true, the sheet will completely hide at the bottom of the screen.	`false`
`fullHeight`	`boolean?`	Whether to allow the sheet to go 100% of the screen height. If false, the highest it can go is the maximum of `peekHeights`. Otherwise it'll stick to `defaultHeight`.	`true`
`onIndexChange`	`(index:number) => void?`	This will be fired when the user interacts with the sheet and moves it to a position other than the current one.	`undefined`
`peekHeights`	`number[]?`	Progressive peek heights for the bottom sheet to stop at. Use this to reveal more detailed information as the sheet is pulled up.	`[]`
`springConfig`	`Record<string, any>?`	The `react-spring` config used when snapping to heights.	`config.stiff`
`styles`	`{ root: {}, backdrop: {}, background: {} }`	Pass additional styles to either the sheet, the backdrop or the background components.	`{ root: {}, backdrop: {}, background: {} }`
`threshold`	`number?`	The threshold for over-dragging the sheet above its maximum height before it snaps to the highest position.	`70`

Upcoming

Cypress tests - Jest doesn't play nicely with dragging and dropping. Help appreciated.
Hooks API for binding custom components instead of a prescribed animated.div
~~Programatically set stop height~~ see currentIndex and onIndexChange
~~Access to current stop index~~
~~open() and close() for programatic interaction~~
passing custom react-spring config
anything else?