A React component with the bottom sheet experience we have for native mobile applications, but for web ✨
npm install react-draggable-bottom-sheetA React component with the bottom sheet experience we have for native mobile applications, but for web ✨
``bash`
npm install react-draggable-bottom-sheet
The component requires its CSS styles to be imported separately. Add the following import to your application:
`javascript`
import "react-draggable-bottom-sheet/dist/styles.css";
`javascript
import BottomSheet from "react-draggable-bottom-sheet";
const NiceComponent = () => {
const [isOpen, setIsOpen] = useState(false);
const close = () => setIsOpen(false);
return (
// your UI code here
);
};
`
In case you want some places to not drag the bottom sheet, just put the data-no-drag` data attribute on the tag.
`javascript`
don't drag the bottom sheet
here you can drag it
To set up the development environment, follow these steps:
1. Install the dependencies:
`bash`
npm install
2. Start the development server:
`bash`
npm start
To test the library in a React project, follow these steps:
1. Link the library in the repository root:
`bash`
npm link
2. Link the library in your React project:
`bash`
npm link react-draggable-bottom-sheet
3. Now you can import and use the library in your React project for testing purposes.
Alternatively, you can also put the path straight to the root folder of the library if you prefer not to link:
`javascript``
//in your app's package.json
"react-draggable-bottom-sheet":