@sergeymyssak/swipeable-bottom-sheet v0.0.7

Swipeable bottom sheet

Swipeable bottom sheet implementation, that uses react-swipeable-views.

Installation

Open a Terminal in the project root and run:

npm install @sergeymyssak/swipeable-bottom-sheet

or

yarn add @sergeymyssak/swipeable-bottom-sheet

Quick start

BottomSheet.js

import React, { memo } from "react";
import classNames from "classnames";
import SwipeableBottomSheet from '@sergeymyssak/swipeable-bottom-sheet';
import '@sergeymyssak/swipeable-bottom-sheet/lib/min.css';
import "./index.css";

const BottomSheet = ({
  isOpen,
  disableSwipe = false,
  onChange,
  children,
  containerClassName,
  bodyClassName
}) => (
  <SwipeableBottomSheet
    isOpen={isOpen}
    onChange={onChange}
    swipeableViewsProps={{ disabled: disableSwipe }}
    containerClassName={classNames("custom-bottom-sheet", containerClassName)}
    bodyClassName={classNames("custom-bottom-sheet__body", bodyClassName)}
  >
    {children}
  </SwipeableBottomSheet>
);

export default memo(BottomSheet);

index.css

.custom-bottom-sheet {
  z-index: 8;
  display: none;
  background-color: "white";
}

.custom-bottom-sheet__body {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

@media only screen and (max-width: 767px) {
  .custom-bottom-sheet {
    display: unset;
  }
}

You can see the example here

Options

marginTop (optional): number

The top margin applied to the top of the sheet when open. Defaults to 0.

overflowHeight (optional): number

Height(px) of the visible part when the bottom sheet is closed. Defaults to 0.

isOpen (required): boolean

Use this property to control the state of the bottom sheet.

isFullScreen (optional): boolean

If true, the bottom sheet will stretch to the full height of the window.

isScrollTopOnClose (optional): boolean

If true, content scrolls to the top when the bottom sheet will be closed.

containerClassName (optional): string

Classname applied on the container of the bottom sheet.

bodyClassName (optional): string

Classname applied on the body of the bottom sheet.

overlayClassName (optional): string

Classname applied on the overlay of the bottom sheet.

swipeableViewsProps (optional): SwipeableViews

Use react-swipeable-views (v0.13.9) props.