Registry / web-framework / react-bottom-drawer

react-bottom-drawer

library0.1.1jsnpmunverified

react-bottom-drawer is a lightweight React component designed to create mobile-friendly dialogs that slide up from the bottom of the screen. Although functional on desktop, its primary design consideration is touch-based mobile interaction patterns, offering a UX similar to bottom sheets found in many mobile applications. Currently at version 0.1.1, the library provides a simple, controlled API for managing the drawer's visibility and content. It offers full TypeScript support, being entirely written in TypeScript, which enhances developer experience through strong typing and autocompletion. The component differentiates itself by focusing on a specific mobile UI pattern with minimal configuration, allowing developers to easily integrate bottom sheet UIs into their applications without extensive setup. Release cadence is not explicitly defined but is expected to evolve as the project matures and gathers community feedback, typical for pre-1.0 libraries, with potential breaking changes between minor versions as the API solidifies.

web-framework

npm install react-bottom-drawer

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-BOTTOM-DRAWE

react-bottom-drawer

web-frameworkjavascriptv0.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Drawer

✓ import Drawer from 'react-bottom-drawer';

✗ import { Drawer } from 'react-bottom-drawer';

The `Drawer` component is exported as a default export.

DrawerProps

✓ import type { DrawerProps } from 'react-bottom-drawer';

✗ import { DrawerProps } from 'react-bottom-drawer';

Import types using `import type` for clarity and better tree-shaking in TypeScript.

useState, useCallback

✓ import React, { useState, useCallback } from 'react';

These are standard React hooks often used with `react-bottom-drawer` to manage its visibility and close logic.

This example demonstrates how to integrate `react-bottom-drawer` into a functional React component, controlling its visibility with local state and providing content.

import React, { useState, useCallback } from 'react'; import Drawer from 'react-bottom-drawer'; function MyBottomDrawer() { const [isVisible, setIsVisible] = useState(false); const onClose = useCallback(() => { setIsVisible(false); }, []); return ( <div> <button onClick={() => setIsVisible(true)}>Open Drawer</button> <Drawer isVisible={isVisible} onClose={onClose} duration={250} hideScrollbars={false} mountOnEnter={true} unmountOnExit={true} > <div style={{ padding: '20px' }}> <h3>Drawer Content</h3> <p>This is some content inside the bottom drawer.</p> <p>You can put any React elements here.</p> <button onClick={onClose}>Close from inside</button> </div> </Drawer> </div> ); }

Debug

Known issues

gotchaAs a pre-1.0 release (version 0.1.1), the API of `react-bottom-drawer` might not be entirely stable. Minor versions could introduce breaking changes before a stable 1.0 release, requiring adjustments when upgrading.

fix

Review the changelog carefully when upgrading to new minor versions. Consider pinning to exact versions (e.g., `"react-bottom-drawer": "0.1.1"`) until a stable major release.

affects: >=0.1.0

gotchaCustomizing styles for `react-bottom-drawer` using the `className` prop can sometimes necessitate the use of `!important` in CSS rules to override default styles, due to the component's internal styling specificity. This can make theming less straightforward than typical component styling.

fix

When custom styling via `className` doesn't apply, inspect the component's generated DOM to identify the specific class names and hierarchy. Use `!important` sparingly for direct overrides, or increase CSS specificity in your custom styles to match or exceed the component's defaults.

affects: >=0.1.0

gotchaThe `Drawer` component is a controlled component, meaning its visibility is entirely managed by the `isVisible` prop and the `onClose` callback. Forgetting to update the `isVisible` state to `false` within the `onClose` handler will prevent the drawer from closing correctly when the backdrop is clicked or a close action is triggered.

fix

Ensure the `onClose` callback function provided to the `Drawer` component correctly updates the state variable bound to `isVisible` to `false` in your parent component (e.g., `setIsVisible(false)`).

affects: >=0.1.0

gotchaBy default, `mountOnEnter` and `unmountOnExit` are `true`. This means the drawer's children are only mounted into the DOM when `isVisible` is `true` and are entirely removed when `isVisible` becomes `false`. While beneficial for performance, this can lead to the loss of internal component state or re-initialization of components within the drawer each time it opens.

fix

If you need the drawer's children to retain their state or remain in the DOM even when the drawer is hidden (e.g., for faster re-opening or persistent state), set `mountOnEnter={false}` or `unmountOnExit={false}` as appropriate for your use case.

affects: >=0.1.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'useState') or 'Hooks can only be called inside of the body of a function component.'

The `Drawer` component is being used outside of a valid React functional component context, or the `react` and `react-dom` peer dependencies are either missing or incompatible versions.

fix

Ensure `react` and `react-dom` (versions `^16.8.0` or higher) are installed and correctly configured in your project. Verify that the `Drawer` component is rendered within a proper React functional component.

Drawer does not close when clicking on the backdrop or calling the onClose handler.

The `onClose` prop provided to the `Drawer` component does not correctly update the state that controls the `isVisible` prop.

fix

Double-check that the `onClose` callback function in your parent component explicitly sets the `isVisible` state variable to `false`. For example, if you use `useState`, ensure `setIsVisible(false)` is called within `onClose`.

Upgrade

Version history

0.1.1latest on npm

Audit

Dependencies

reactrequiredRequired for the component to function as it's a React component.

react-domrequiredRequired for rendering React components to the DOM.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/fpellicero/react-bottom-drawer ↗

packagehttps://www.npmjs.com/package/react-bottom-drawer ↗