React Simple Bottom Sheet 🎉

A simple bottom sheet component for your React apps - best for PWAs 🔥

Installation 🚀

This library is built with framer-motion and styled-components therefore you have to install first these two dependencies on your project.

npm install framer-motion styled-components or yarn add framer-motion styled-components

then

npm install react-simple-bottom-sheet or yarn add react-simple-bottom-sheet

Sample Usage 💻

import React from "react";
import { bottomSheet } from "react-simple-bottom-sheet";

export  default  function App() {
    const handleOpen = () => bottomSheet.create({
	    content: (<p>Hello world!</p>),
    });
    return <button onClick={handleOpen}>Open</button>
}

You can check example/src folder to know more!

API 👋

• bottomSheet.create(createConfig)
• bottomSheet.close(closeConfig)
• bottomSheet.isOpen(id)

The properties of config are as follows:

create({...})

| Property | Description | Type | Default | | ------------ | --------------------------------------- | ------------------------------------------------------------------------------------------ | -------------------- | | id | Unique identifier of the bottom sheet | string | "default" | | content | Main content of bottom sheet (required) | ReactNode | - | | header | Header content of bottom sheet | ReactNode | - | | footer | Footer content of bottom sheet | ReactNode | - | | dragHandle | Draggable elements of bottom sheet | ['content' \| 'header \| 'footer' \| 'mask'] | ['header', 'mask'] | | onClose | function | Trigger when bottom sheet is closed | - | | onOpen | function | Trigger when bottom sheet is opened | - | | darkMode | boolean | Changes the appearance of bottom sheet to dark mode | false | | maskClosable | boolean | Whether to close the modal dialog when the mask (area outside the bottom sheet) is clicked | true | | debug | boolean | Enables debug mode to show the draggable areas | false |

close({...})

| Property | Description | Type | Default | | -------- | --------------------------------------------------------------------------- | -------- | ----------- | | id | Unique identifier of the bottom sheet that needs to be closed | string | "default" | | callback | Specifies the function that will be called after the bottom sheet is closed | function | - |

isOpen(id)

| Property | Description | Type | Default | | -------- | ---------------------------------------------------------------------------- | ------ | ----------- | | id | Unique identifier of the bottom sheet that needs to be checked if it's open. | string | "default" |

Note 🗒

Putting clickable elements such as Buttons, Inputs, etc. on draggable areas is not possible as of the moment - still working on it.

Donation 🙏

If this project help you reduce time to develop, you can give me a cup of ☕️ or ☕️ :)

License 🙌

Copyright (c) 2021 chcepe.github.io

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.