React-Swipe-Modal

🌀 A swipeable modal for the browser, just like on your smartphone.

Features

• Swipe or tap to close
• Completely customizable appearance
• Different closing triggers and behaviours
• Display a react component inside the modal
• onShow and onClose hooks

Installation

npm install react-swipe-modal

Usage

import { useRef } from 'react';
import SwipeModal, { SwipeModalRef } from 'react-swipe-modal';


const App = () => {
    const modalRef = useRef<SwipeModalPublicMethods>(null);

    const showModal = () => modalRef.current?.show(); // Call this function to show modal
    const hideModal = () => modalRef.current?.hide(); // Call this function to hide modal

    return (
        <SwipeModal ref={modalRef}>
            Put anything inside here!
        </SwipeModal>
    );
};

Props

Name | Type | Default value | Description
----------------------------|---------------------------|---------------|--------------------- children | ReactNode\ReactNode[] | required | The content to be rendered inside the modal. Functionality | | | closeTrigger | 'swipe'|'height' | 'swipe' | The trigger to close the modal.'swipe' means that modal will close when modal was swiped down faster than closeTriggerSpeed.'height' means that modal will close when height of modal is less than closeTriggerPercentage. closeTriggerPercentage | number | 50 | The height percentage that triggers the modal to close when using the closeTrigger 'height'. closeTriggerSpeed | number | 500 | The swipe speed that triggers the modal to close when using the closeTrigger 'swipe'. disableSwipe | boolean | false | Set to true if you don't want allow swiping. swipeOnlyFromBar | boolean | false | Set to true if you want to allow swiping only from the bar. Styling | | | animationDuration | number | 300 | The duration of the modal's opening and closing animations, in milliseconds. backdropOpacity | number | 0.3 | The opacity of the backdrop of the modal. barColor | string | 'dimgrey' | The color of the bar at the top of the modal. hideBar | boolean | false | Set to true to hide the bar at the top of the modal. modalColor | string | 'black' | The background color of the modal. Additional Styling | | | backdropStyle | ViewStyle|ViewStyle[] | | Additional styles to be applied to the backdrop. barStyle | ViewStyle|ViewStyle[] | | Additional styles to be applied to the modal. modalStyle | ViewStyle|ViewStyle[] | | Additional styles to be applied to the modals. Callbacks | | | onShow | () => void | | A callback function that will be triggered when the modal is shown. onHide | () => void | | A callback function that will be triggered when the modal is hidden.

Public Methods

Name | Description ----------------------|-------------- show | Call this method to show the modal. hide | Call this method to hide the modal.

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome!

You can also find me on my Homepage.

License

Licensed under MIT