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.

Public Methods

Name	Description
show()	Shows the modal.
close()	Closes the modal.

Contribute

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

You can find more from me on my homepage manuelpickl.com.

License

Licensed under MIT