Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oc8/sheetslide-react
SheetSlide Swipeable is a React component for creating customizable, swipeable sliding sheets in web applications.
https://github.com/oc8/sheetslide-react
bottomsheet mobile-app panel react sheet sheetslide slide swipe topsheet webapp
Last synced: 1 day ago
JSON representation
SheetSlide Swipeable is a React component for creating customizable, swipeable sliding sheets in web applications.
- Host: GitHub
- URL: https://github.com/oc8/sheetslide-react
- Owner: oc8
- Created: 2023-05-02T22:26:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-05-04T08:32:22.000Z (over 1 year ago)
- Last Synced: 2024-11-27T16:45:51.194Z (2 months ago)
- Topics: bottomsheet, mobile-app, panel, react, sheet, sheetslide, slide, swipe, topsheet, webapp
- Language: TypeScript
- Homepage:
- Size: 526 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# SheetSlide Swipeable
SheetSlide is a Node package for React that allows you to add a swipeable, sliding sheet to your web application. With this component, you can easily add a sheet that can be moved vertically by swiping up or down.
## Demo
## Installation
Install the package using npm:
```bash
npm install sheetslide-react
```
## Usage
Here's an example of using SheetSlide in your React application:
```tsx
import React, { useState } from 'react';
import SheetSlide from 'sheetslide-react';
function App() {
const [open, setOpen] = useState(false);
return (
setOpen(!open)}>Toggle SheetSlide
setOpen(value)}
minSize="20vh"
color="white"
size="85vh"
side="top"
>
Your sheet content
);
}
export default App;
```
## Props
SheetSlide accepts the following props:
- `children` (React.ReactNode) : The child elements to be displayed within the sheet.
- `open` (boolean) : Indicates whether the sheet is open or closed.
- `onOpenChange` (Function) : Callback called when the open state of the sheet changes.
- `onClose` (Function, optional) : Callback called when the sheet closes.
- `minSize` (string, optional) : The minimum size of the sheet when closed (e.g., '20vh').
- `fit` (boolean, optional) : If true, the sheet adjusts to the size of its content.
- `color` (string, optional) : The background color of the sheet.
- `size` (string, optional) : The size of the sheet when open (e.g., '85vh').
- `side` (string, optional) : The side of the screen where the sheet will appear. Accepts "top", or "bottom" (default is "bottom").
- `threshold` (number, optional) : The minimum swipe distance required to trigger actions (e.g., 50).
- `shadow` (boolean, optional) : If true, a shadow effect will be applied to the sheet.
- `rounded` (boolean, optional) : If true, the sheet will have rounded corners.
- `backgroundShadow` (boolean, optional) : If true, a background shadow will be displayed when the sheet is open.
- `style` (React.CSSProperties, optional) : Custom CSS styles to be applied to the sheet.
## License
This project is licensed under the MIT License.