{"library":"react-bottom-drawer","title":"React Bottom Drawer","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-bottom-drawer"],"cli":null},"imports":["import Drawer from 'react-bottom-drawer';","import type { DrawerProps } from 'react-bottom-drawer';","import React, { useState, useCallback } from 'react';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState, useCallback } from 'react';\nimport Drawer from 'react-bottom-drawer';\n\nfunction MyBottomDrawer() {\n  const [isVisible, setIsVisible] = useState(false);\n\n  const onClose = useCallback(() => {\n    setIsVisible(false);\n  }, []);\n\n  return (\n    <div>\n      <button onClick={() => setIsVisible(true)}>Open Drawer</button>\n      <Drawer\n        isVisible={isVisible}\n        onClose={onClose}\n        duration={250}\n        hideScrollbars={false}\n        mountOnEnter={true}\n        unmountOnExit={true}\n      >\n        <div style={{ padding: '20px' }}>\n          <h3>Drawer Content</h3>\n          <p>This is some content inside the bottom drawer.</p>\n          <p>You can put any React elements here.</p>\n          <button onClick={onClose}>Close from inside</button>\n        </div>\n      </Drawer>\n    </div>\n  );\n}","lang":"typescript","description":"This example demonstrates how to integrate `react-bottom-drawer` into a functional React component, controlling its visibility with local state and providing content.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}