Swipeable Bottom Sheet

A swipeable material's bottom sheet implementation, that uses react-swipeable-views. This can be used to reproduce Material Design's Bottom Sheet guidelines

Installation

npm i -S react-swipeable-bottom-sheet

Demo & Examples

• Uncontrolled bottom sheet
• Controlled bottom sheet
• Fullscreen bottom sheet
• Scrollable bottom sheet

Usage

import SwipeableBottomSheet from 'react-swipeable-bottom-sheet';

<SwipeableBottomSheet overflowHeight={64}>
	<div style={{ height: '240px' }}>
		Here goes the content of your bottom sheet
	</div>
</SwipeableBottomSheet>

The bottom sheet's height (when open) scales automatically with its content. If it exceeds the window height, content become scrollable.

Props

| Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | overflowHeight | number | 0 | The height (in px) of the sheet when closed. | | open | bool | | Use this property to enable controlled mode. If true, it will open the sheet. | | defaultOpen | bool | false | If true, the sheet is open at component mount. | | onChange | function(isOpen) | | The callback that fires after sheet opens or closes. | | onTransitionEnd | function() | | The callback that fires after opening or closing animation. | | fullScreen | bool | false | If true, the sheet takes the full height of the window when open. | | marginTop | number | 0 | The top margin applied to the top of the sheet when open. Use this prop to prevent navbar overflow. | | shadowTip | bool | true | If true, a box shadow is displayed at sheet bottom when closed. This is used to show that content is hidden below. | | topShadow | bool | true | If true, a box shadow is displayed at sheet top border. | | overlay | bool | true | If true, an overlay is displayed behind sheet when open. A click on the overlay closes the sheet. | | scrollTopAtClose | bool | true | If true, the content is scrolled to the top when sheet closes. | | swipeableViewsProps | object | {} | Props passed to SwipeableViews component (see documentation). | | style | object | {} | Style applied on the root (non-swiped) component. | | bodyStyle | object | {} | Style applied on the body of the bottom sheet. | | overlayStyle | object | {} | Style applied on the overlay. |

Development (src, lib and the build process)

NOTE: The source code for the component is in src. A transpiled CommonJS version (generated with Babel) is available in lib for use with node.js, browserify and webpack. A UMD bundle is also built to dist, which can be included without the need for any build system.

To build the examples locally, run:

npm install
npm start

Then open localhost:8000 in a browser.

To build, watch and serve the examples (which will also watch the component source), run npm start. If you just want to watch changes to src and rebuild lib, run npm run watch (this is useful if you are working with npm link).

License

MIT