A pure Js snappable, scrollable, customisable bottomsheet!
npm install js-bottomsheet
A pure Js snappable, scrollable, customisable bottomsheet!
- 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.
1. Use Gesture: https://use-gesture.netlify.app/docs/#vanilla-javascript
2. Anime js: https://animejs.com/
npm:
``
npm i js-bottomsheet
Here's a simple usage of the bottomsheet with static content.
HTML:
`
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 shoulddata-bottomsheet
have the ID as well as the data attribute
JS:
`
BottomSheet({
trigger: 'trigger-1',
});
This would create a simple bottomsheet with the default props.
properties that are common for all layouts - bottomsheet, modal and sidesheet
The Id of the trigger element.
> Type: string
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:
});
$3
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:
});
$3
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:
});
$3
A boolean defining whether to display an overlay or not.
> Type: boolean
> Default: false
$3
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'
});
$3
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: ,
openOnLoad: true,
});
`$3
This prop can be used to remove the sheet from the DOM on closing the sheet.
> Type: boolean
> Default: false
$3
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
$3
A boolean to keep the sheet open or close it by clicking on the overlay.
> Type: boolean
> Default: true
$3
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
$3
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]
});
$3
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: ,
});
`$3
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
$3
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
$3
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
$3
It's an array of x and y positions in numbers as percentage for the modal.
> Type: Array of numbers
> Default: [50, 50]
$3
Close icon for the modal in web.
> Type: string
> Default:
$3
The minimum width at which you'd like a modal to appear.
> Type: number
> Default: 700
Sidesheet specific props:
$3
The minimum snap point percentage at which the sidesheet would open, resizing
below it would close the sheet.
> Type: number - 0 to 100
$3
The maximum snap point percentage upto which the sidesheet can be resized.
> Type: number - 0 to 100
Lifecycle methods
$3
This callback function can be used to perform operations during the
initialization of the bottom sheet.
> Type: function
eg:
BottomSheet({
trigger: ,
onInit: () => {
console.log("init");
}
});
`$3
This callback function can be used to perform operations once the sheet is open.
> Type: function
eg:
BottomSheet({
trigger: ,
onOpen: () => {
console.log("open");
}
});
});
`$3
This callback function can be used to perform operations once the sheet is
closed.
> Type: function
eg:
BottomSheet({
trigger: ,
onClose: () => {
console.log("close");
}
});
`$3
This callback function allows you to perform operations when starting to drag
the sheet.
> Type: function
eg:
BottomSheet({
trigger: ,
onDragStart: () => {
console.log("drag start");
}
});
`$3
Operations to be run when dragging of the sheet ends can be done using this
callback function.
> Type: function
eg:
BottomSheet({
trigger: ,
onDragEnd: () => {
console.log("drag end");
}
});
`Methods
$3
Can be used to open the bottomsheet programatically. This works only if the
sheet it already initialised.
eg:
let bottomsheet1 = BottomSheet({
trigger:
}); //this would open the sheet by default bottomsheet1.open() //can be used if it's necessary to open the sheet in any other scenario.
$3
Can be used to close the bottomsheet programatically. This works only if the
sheet it already initialised and open.
eg:
let bottomsheet1 = BottomSheet({
trigger:
}); bottomsheet1.close()
$3
"When no longer needed, the event listeners can be removed from the triggers
using this method."
eg:
let bottomsheet1 = BottomSheet({
trigger:
}); bottomsheet1.destroy()
$3
The sheet can be re-initialised if needed, using this function.
eg:
let bottomsheet1 = BottomSheet({
trigger:
}); bottomsheet1.init()
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' |