https://github.com/timelessco/js-bottomsheet
A pure Js snappable, scrollable, customisable bottomsheet!
https://github.com/timelessco/js-bottomsheet
js library production template vanilla
Last synced: 3 days ago
JSON representation
A pure Js snappable, scrollable, customisable bottomsheet!
- Host: GitHub
- URL: https://github.com/timelessco/js-bottomsheet
- Owner: timelessco
- License: mit
- Created: 2022-09-22T05:38:46.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-28T06:10:28.000Z (9 months ago)
- Last Synced: 2025-10-08T09:52:55.036Z (4 months ago)
- Topics: js, library, production, template, vanilla
- Language: JavaScript
- Homepage: https://js-bottomsheet-website.vercel.app/
- Size: 21.8 MB
- Stars: 42
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Js Bottomsheet
[](https://www.npmjs.com/package/js-bottomsheet)
A pure Js snappable, scrollable, customisable bottomsheet!
## Features
- Works as a bottomsheet in mobile and as a modal or sidesheet in web.
- Supports multiple snap points.
- Uses spring animations.
- Supports stacking of bottomsheets.
- Is scrollable at the last snappoint.
- Supports dynamic content.
- Sidesheets are resizable.
## Dependencies:
1. Use Gesture: https://use-gesture.netlify.app/docs/#vanilla-javascript
2. Anime js: https://animejs.com/
## Installation
npm:
```
npm i js-bottomsheet
```
## Usage
Here's a simple usage of the bottomsheet with static content.
HTML:
```
click
The Bottomsheet
```
The trigger should have an ID which would be used in the initialisation of the
bottomsheet, and a data attribute containing the ID referring to it's
corresponding bottomsheet `data-bottomsheet-id=[id]`. The bottomsheet should
have the ID as well as the data attribute `data-bottomsheet`
JS:
```
BottomSheet({
trigger: 'trigger-1',
});
```
This would create a simple bottomsheet with the default props.
## Props:
properties that are common for all layouts - bottomsheet, modal and sidesheet
### trigger:
The Id of the trigger element.
> Type: string
### content:
Content needn't always be a DOM element, it could be passed in dynamically too,
as a string.
> Type: string
eg:
```
BottomSheet({
trigger: 'trigger-1',
content: `
The Bottomsheet`
});
```
### headerContent:
The content that needs to remain fixed at the top of the sheet. It should have a
class of 'header'.
> Type: string
eg:
```
BottomSheet({
trigger: 'trigger-1',
headerContent: `
...`
});
```
### footerContent:
The content that needs to remain fixed at the bottom of the sheet. It should
have a class of 'footer'.
> Type: string
eg:
```
BottomSheet({
trigger: 'trigger-1',
footerContent: `
`
});
```
### displayOverlay:
A boolean defining whether to display an overlay or not.
> Type: boolean
> Default: false
### webLayout:
This property determines the behavior of the sheet in web view, which can either
be a modal or a sidesheet. Sidesheets can be configured to open from either the
left or the right side of the screen.
> Type: 'modal || sideSheetLeft || sideSheetRight'
> Default: 'modal'
eg:
```
BottomSheet({
trigger: 'trigger-1',
content:
The Bottomsheet,
webLayout: 'sideSheetLeft'
});
```
### openOnLoad:
This property enables the sheet to be automatically opened upon loading, without
requiring a trigger. Since there is no trigger, the content needs to be
dynamically passed in.
> Type: boolean
> Default: false
eg:
```
BottomSheet({
content: `
The sheet`,
openOnLoad: true,
});
```
### cleanUpOnClose
This prop can be used to remove the sheet from the DOM on closing the sheet.
> Type: boolean
> Default: false
### dismissible
This property determines whether the sheet can be closed by the user or not. If
set to false, the sheet cannot be translated below it's minimum snap point.
> Type: boolean
> Default: true
### closeOnOverlayClick
A boolean to keep the sheet open or close it by clicking on the overlay.
> Type: boolean
> Default: true
### scrollableSheet
Defines whether the sheet is scrollable or not, when the sheet is at it's last
snap point.
> Type: booelean
> Default: true
## Bottomsheet specific props
### snapPoints:
An array of all the snappoints you'd like the bottomsheet to snap at, from
bottom to top. Works as percentage.
Note that mentioning 0 as the first snappoint will not open the sheet.
> Type: Array of numbers(from 1 to 100)
> Default: [100]
eg:
```
BottomSheet({
trigger: 'trigger-1',
snappoints: [20, 60, 100]
});
```
### draggableArea:
An area which would be sticky to the top of the sheet and would always listen to
drag events, even if the content of the sheet is scrollable. It should have an
ID.
> Type: string
eg:
```
BottomSheet({
trigger: 'trigger-1',
content:
The Bottomsheet,
draggableArea: `
`,
});
```
### rubberband
The rubberband effect is only applicable if the sheet is at it's last snap point
and is activated when scrollableSheet is set to false. It creates a snappy or
bouncy behavior for the bottom sheet.
> Type: booelean
> Default: false
### velocityThreshold
The velocity greater than which the bottomsheet would be translated to the next
snappoint, otherwise it would snap back to the old one.
> Type: number
> Default: 0.9
### distanceThreshold
The distance greater than which the bottomsheet would be translated to the next
snappoint, otherwise it would snap back to the old one.
> Type: number
> Default: 150
## Modal specific props
### modalPosition
It's an array of x and y positions in numbers as percentage for the modal.
> Type: Array of numbers
> Default: [50, 50]
### modalCloseIcon
Close icon for the modal in web.
> Type: string
> Default:
```
`
`
```
### minWidthForModal:
The minimum width at which you'd like a modal to appear.
> Type: number
> Default: 700
## Sidesheet specific props:
### sideSheetMinValue
The minimum snap point percentage at which the sidesheet would open, resizing
below it would close the sheet.
> Type: number - 0 to 100
### sideSheetMaxValue
The maximum snap point percentage upto which the sidesheet can be resized.
> Type: number - 0 to 100
## Lifecycle methods
### onInit
This callback function can be used to perform operations during the
initialization of the bottom sheet.
> Type: function
eg:
```
BottomSheet({
trigger: `target-1`,
onInit: () => {
console.log("init");
}
});
```
### onOpen
This callback function can be used to perform operations once the sheet is open.
> Type: function
eg:
```
BottomSheet({
trigger: `target-1`,
onOpen: () => {
console.log("open");
}
});
});
```
### onClose
This callback function can be used to perform operations once the sheet is
closed.
> Type: function
eg:
```
BottomSheet({
trigger: `target-1`,
onClose: () => {
console.log("close");
}
});
```
### onDragStart
This callback function allows you to perform operations when starting to drag
the sheet.
> Type: function
eg:
```
BottomSheet({
trigger: `target-1`,
onDragStart: () => {
console.log("drag start");
}
});
```
### onDragEnd
Operations to be run when dragging of the sheet ends can be done using this
callback function.
> Type: function
eg:
```
BottomSheet({
trigger: `target-1`,
onDragEnd: () => {
console.log("drag end");
}
});
```
## Methods
### open
Can be used to open the bottomsheet programatically. This works only if the
sheet it already initialised.
eg:
```
let bottomsheet1 = BottomSheet({
trigger: `target-1`
}); //this would open the sheet by default
bottomsheet1.open() //can be used if it's necessary to open the sheet in any other scenario.
```
### close
Can be used to close the bottomsheet programatically. This works only if the
sheet it already initialised and open.
eg:
```
let bottomsheet1 = BottomSheet({
trigger: `target-1`
});
bottomsheet1.close()
```
### destroy
"When no longer needed, the event listeners can be removed from the triggers
using this method."
eg:
```
let bottomsheet1 = BottomSheet({
trigger: `target-1`
});
bottomsheet1.destroy()
```
### init
The sheet can be re-initialised if needed, using this function.
eg:
```
let bottomsheet1 = BottomSheet({
trigger: `target-1`
});
bottomsheet1.init()
```
## Styling
You can style the bottomsheet and other elements by overriding it's css styles.
| Element | ClassName |
| :--------------- | :------------ |
| Bottomsheet | 'bottomsheet' |
| Overlay | 'overlay' |
| Modal | 'modal' |
| Modal Close Icon | 'close-modal' |
| Draggable Area | 'draggable' |