# react-swipe-modal

> A swipeable modal for the browser

Latest version **1.1.1** (published 2024-02-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-swipe-modal
pnpm add react-swipe-modal
yarn add react-swipe-modal
bun add react-swipe-modal
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2024-02-26 |
| First published | 2024-02-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 137.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | manuelpickl |
| Keywords | animated, browser, modal, react, swipe, swipeable, swipeable-modal, web, ui |

## Links

- npm: https://www.npmjs.com/package/react-swipe-modal
- Repository: https://github.com/Manuel-Pickl/react-swipe-modal
- Homepage: https://github.com/Manuel-Pickl/react-swipe-modal#readme
- Issues: https://github.com/Manuel-Pickl/react-swipe-modal/issues
- npm.io page: https://npm.io/package/react-swipe-modal

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2024-02-26
- 1.1.0 — 2024-02-25
- 1.0.1 — 2024-02-25
- 1.0.0 — 2024-02-25
- 0.2.3 — 2024-02-18
- 0.2.2 — 2024-02-18
- 0.2.1 — 2024-02-18
- 0.2.0 — 2024-02-18
- 0.1.0 — 2024-02-18
- 0.0.3 — 2024-02-18
- 0.0.2 — 2024-02-18
- 0.0.1 — 2024-02-18

## README

# React-Swipe-Modal

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

<div style="flex-direction:row;">
    <img src="./src/assets/mindforge.gif" alt="modal example 1" width="256px">
    <img src="./src/assets/demo.gif" alt="modal example 2" width="256px">
</div>

## 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](https://react-swipe-modal.netlify.app/)!


## Installation

```
npm i react-swipe-modal
```

## Usage

```jsx
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.<br>`'swipe'` means that modal will close when modal was swiped down faster than `closeTriggerSpeed`.<br>`'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](https://manuelpickl.com/).

## License

Licensed under MIT

---
_Source: https://npm.io/package/react-swipe-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._