React-swipe-modal NPM

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

Demo

Try it out right here!

Installation

npm i react-swipe-modal

Usage

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

const App = () => {
    const modalRef = useRef<SwipeModalRef>(null);
    
    const showModal = () => modalRef.current?.show();

    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.
Styling
`animationDuration`	number	300	The duration of the modal's opening and closing animation in milliseconds.
`backdropOpacity`	number	0.3	The opacity of the modal's backdrop.
`barColor`	string	'dimgrey'	The color of the bar at the top of the modal.
`borderRadius`	string	'1.2rem'	The border radius of the modal.
`hideBar`	boolean	false	Set to `true` to hide the bar at the top of the modal.
`maxWidth`	string	'100vw'	The maximum width of the modal.
`modalColor`	string	'black'	The background color of 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 in percent that triggers the modal to close when using the `closeTrigger` `'height'`.
`closeTriggerSpeed`	number	500	The swipe speed in px/s that triggers the modal to close when using the `closeTrigger` `'swipe'`.
`disableSwipe`	boolean	false	Set to `true` if you don't want to allow swiping.
`swipeOnlyFromBar`	boolean	false	Set to `true` if you want to allow swiping only from the bar.
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 closed.