# react-framer-bottom-sheet

> react framer motion bottom sheet

Latest version **0.1.92** (published 2023-07-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-framer-bottom-sheet
pnpm add react-framer-bottom-sheet
yarn add react-framer-bottom-sheet
bun add react-framer-bottom-sheet
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.92 |
| Published | 2023-07-24 |
| First published | 2023-07-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 221.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | qirtudgus |
| Maintainers | parksunghyun |
| Keywords | bottom sheet, react bottom sheet, framer-motion |

## Links

- npm: https://www.npmjs.com/package/react-framer-bottom-sheet
- Repository: https://github.com/qirtudgus/react-framer-bottom-sheet
- npm.io page: https://npm.io/package/react-framer-bottom-sheet

## Dependencies (1)

- [framer-motion](https://npm.io/package/framer-motion.md) ^10.12.18

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.1.92 (latest) — 2023-07-24
- 0.1.91 — 2023-07-24
- 0.1.9 — 2023-07-24
- 0.1.81 — 2023-07-07
- 0.1.8 — 2023-07-07
- 0.1.72 — 2023-07-06
- 0.1.71 — 2023-07-06
- 0.1.7 — 2023-07-06
- 0.1.62 — 2023-07-05
- 0.1.61 — 2023-07-05
- 0.1.6 — 2023-07-05
- 0.1.53 — 2023-07-04
- 0.1.52 — 2023-07-04
- 0.1.51 — 2023-07-04
- 0.1.5 — 2023-07-04
- … 5 more at https://npm.io/package/react-framer-bottom-sheet/versions

## README

# react-framer-bottom-sheet

![framer](https://github.com/qirtudgus/react-framer-bottom-sheet/assets/70016257/3efd07a1-2b77-4dad-8dba-60f8d2f64512)

## Installation

```sh
npm install react-framer-bottom-sheet
```

or

```sh
yarn add react-framer-bottom-sheet
```

## Usage

```jsx
import FramerBottomSheet from 'react-framer-bottom-sheet';
import { FramerBottomSheetRef } from 'react-framer-bottom-sheet/dist/sheetType';

function App() {
  const sheetRef = useRef < FramerBottomSheetRef > null;

  const buttonHandler = () => {
    sheetRef.current?.snapTo('bottom');
  };

  return (
    <div className="App">
      <button onClick={buttonHandler}>to bottom</button>
      <FramerBottomSheet
        initialPosition="top"
        ref={sheetRef}
        style={{ backgroundColor: '#FAFAFA' }}
        snapPoint={{ top: { height: 400 }, bottom: { height: 100 } }}
        bottomScrollLock
        headerElement={
          <div style={{ height: 50, backgroundColor: 'red' }}>header</div>
        }
        footerElement={
          <div style={{ height: 50, backgroundColor: 'green' }}>footer</div>
        }
      >
        <div style={{ height: 500, backgroundColor: 'blue' }}>Content</div>
      </FramerBottomSheet>
    </div>
  );
}

export default App;
```

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