Skip to content

A simple bottom sheet component for your React apps - best for PWAs. Built with framer-motion.

License

Notifications You must be signed in to change notification settings

chcepe/react-simple-bottom-sheet

Repository files navigation

React Simple Bottom Sheet 🎉

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

Preview

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 ☕️ :)

Paypal donate button

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.

About

A simple bottom sheet component for your React apps - best for PWAs. Built with framer-motion.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published