Wondering what’s next for npm?Check out our public roadmap! »

    @sergeymyssak/swipeable-bottom-sheet
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.7 • Public • Published

    Swipeable bottom sheet

    Version Downloads ISC License

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

    Example-1 Example-2 Example-3

    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.

    See props

    SwipeableViews.propTypes = {
      /**
       * This is callback property. It's called by the component on mount.
       * This is useful when you want to trigger an action programmatically.
       * It currently only supports updateHeight() action.
       *
       * @param {object} actions This object contains all posible actions
       * that can be triggered programmatically.
       */
      action: PropTypes.func,
      /**
       * If `true`, the height of the container will be animated to match the current slide height.
       * Animating another style property has a negative impact regarding performance.
       */
      animateHeight: PropTypes.bool,
      /**
       * If `false`, changes to the index prop will not cause an animated transition.
       */
      animateTransitions: PropTypes.bool,
      /**
       * The axis on which the slides will slide.
       */
      axis: PropTypes.oneOf(['x', 'x-reverse', 'y', 'y-reverse']),
      /**
       * Use this property to provide your slides.
       */
      children: PropTypes.node.isRequired,
      /**
       * This is the inlined style that will be applied
       * to each slide container.
       */
      containerStyle: PropTypes.object,
      /**
       * If `true`, it will disable touch events.
       * This is useful when you want to prohibit the user from changing slides.
       */
      disabled: PropTypes.bool,
      /**
       * This is the config used to disable lazyloding,
       * if `true` will render all the views in first rendering.
       */
      disableLazyLoading: PropTypes.bool,
      /**
       * If `true`, it will enable mouse events.
       * This will allow the user to perform the relevant swipe actions with a mouse.
       */
      enableMouseEvents: PropTypes.bool,
      /**
       * Configure hysteresis between slides. This value determines how far
       * should user swipe to switch slide.
       */
      hysteresis: PropTypes.number,
      /**
       * If `true`, it will ignore native scroll container.
       * It can be used to filter out false positive that blocks the swipe.
       */
      ignoreNativeScroll: PropTypes.bool,
      /**
       * This is the index of the slide to show.
       * This is useful when you want to change the default slide shown.
       * Or when you have tabs linked to each slide.
       */
      index: PropTypes.number,
      /**
       * This is callback prop. It's call by the
       * component when the shown slide change after a swipe made by the user.
       * This is useful when you have tabs linked to each slide.
       *
       * @param {integer} index This is the current index of the slide.
       * @param {integer} indexLatest This is the oldest index of the slide.
       * @param {object} meta Meta data containing more information about the event.
       */
      onChangeIndex: PropTypes.func,
      /**
       * @ignore
       */
      onMouseDown: PropTypes.func,
      /**
       * @ignore
       */
      onMouseLeave: PropTypes.func,
      /**
       * @ignore
       */
      onMouseMove: PropTypes.func,
      /**
       * @ignore
       */
      onMouseUp: PropTypes.func,
      /**
       * @ignore
       */
      onScroll: PropTypes.func,
      /**
       * This is callback prop. It's called by the
       * component when the slide switching.
       * This is useful when you want to implement something corresponding
       * to the current slide position.
       *
       * @param {integer} index This is the current index of the slide.
       * @param {string} type Can be either `move` or `end`.
       */
      onSwitching: PropTypes.func,
      /**
       * @ignore
       */
      onTouchEnd: PropTypes.func,
      /**
       * @ignore
       */
      onTouchMove: PropTypes.func,
      /**
       * @ignore
       */
      onTouchStart: PropTypes.func,
      /**
       * The callback that fires when the animation comes to a rest.
       * This is useful to defer CPU intensive task.
       */
      onTransitionEnd: PropTypes.func,
      /**
       * If `true`, it will add bounds effect on the edges.
       */
      resistance: PropTypes.bool,
      /**
       * This is the className that will be applied
       * on the slide component.
       */
      slideClassName: PropTypes.string,
      /**
       * This is the inlined style that will be applied
       * on the slide component.
       */
      slideStyle: PropTypes.object,
      /**
       * This is the config used to create CSS transitions.
       * This is useful to change the dynamic of the transition.
       */
      springConfig: PropTypes.shape({
        delay: PropTypes.string,
        duration: PropTypes.string,
        easeFunction: PropTypes.string,
      }),
      /**
       * This is the inlined style that will be applied
       * on the root component.
       */
      style: PropTypes.object,
      /**
       * This is the threshold used for detecting a quick swipe.
       * If the computed speed is above this value, the index change.
       */
      threshold: PropTypes.number,
    };

    Install

    npm i @sergeymyssak/swipeable-bottom-sheet

    DownloadsWeekly Downloads

    58

    Version

    0.0.7

    License

    ISC

    Unpacked Size

    2.54 MB

    Total Files

    35

    Last publish

    Collaborators

    • avatar
    • avatar