https://github.com/ha1fstack/slick-bottom-sheet
Modern bottom sheet component for React, built with Framer Motion.
https://github.com/ha1fstack/slick-bottom-sheet
Last synced: about 2 months ago
JSON representation
Modern bottom sheet component for React, built with Framer Motion.
- Host: GitHub
- URL: https://github.com/ha1fstack/slick-bottom-sheet
- Owner: ha1fstack
- License: mit
- Created: 2023-08-01T04:26:00.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-03T11:46:41.000Z (almost 2 years ago)
- Last Synced: 2025-03-16T20:17:21.470Z (2 months ago)
- Language: TypeScript
- Homepage: https://slick-bottom-sheet.vercel.app
- Size: 105 KB
- Stars: 13
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Slick Bottom Sheet
Modern bottom sheet component for React, built with [Framer Motion](https://github.com/framer/motion).
## Introduction
Slick Bottom Sheet is a bottom sheet component with buttery smooth animation and user friendly interactions for React. The gestures and animations are handled with Framer Motion. It aims to provide a simple and flexible API that works out of the box, with minimal dependencies.
## Install
This package requires framer-motion as a peer dependency.
```bash
npm install slick-bottom-sheet
yarn add slick-bottom-sheet
pnpm install slick-bottom-sheet
```
## Demo
[slick-bottom-sheet.vercel.app](https://slick-bottom-sheet.vercel.app/)
or clone the repo and run the `./example` Next.JS app locally.
## API Reference
For now, please refer to JSDoc and demo source code.
## Example
```tsx
"use client";
import React from "react";
import { SlickBottomSheet, SlickBottomSheetControl } from "slick-bottom-sheet";
export default function Page() {
const [isOpen, setIsOpen] = React.useState(false);
const ref = React.useRef(null);
React.useEffect(() => {
setIsOpen(true);
}, []);
return (
<>
{
console.log("open");
setIsOpen(true);
}}
>
Open
{
setIsOpen(false);
}}
ref={ref}
onSnap={console.log}
className="bg-white rounded-t-2xl overflow-hidden shadow-xl z-10 isolate border"
header={
}
footer={
ref.current?.snapTo("close")}
className="w-full bg-indigo-600 py-2 font-medium text-white rounded"
>
Dismiss
}
backdropClassName="backdrop-blur-sm bg-black bg-opacity-10"
>
Hello There!
This is a sheet demo with default breakpoint ["auto"].
You can drag the sheet or backdrop to control the sheet.
>
);
}
```
## To Do
- [ ] More exposed options
- [ ] Add testings
- [ ] Add more examples
- [ ] Improve docs
- [ ] Better A11Y support