{"repo":"stipsan/react-spring-bottom-sheet","free":true,"listed":false,"github":"https://github.com/stipsan/react-spring-bottom-sheet","clone":"git clone https://github.com/stipsan/react-spring-bottom-sheet.git","description":"Accessible ♿️, Delightful ✨, & Fast 🚀","language":"TypeScript","stars":1069,"topics":["react","animation","ux","bottom-sheet","bottomsheet","sheet","modal","overlay","popup","dialog"],"license":"MIT","category":"ui-components","readme_excerpt":"[![gzip size][gzip-badge]][unpkg-dist] [![size][size-badge]][unpkg-dist] [![module formats: cjs, es, and modern][module-formats-badge]][unpkg-dist] react-spring-bottom-sheet is built on top of [react-spring] and [react-use-gesture] . It busts the myth that accessibility and supporting keyboard navigation and screen readers are allegedly at odds with delightful, beautiful, and highly animated UIs. Every animation and transition use CSS custom properties instead of manipulating them directly, allowing complete control over the experience from CSS alone. Installation Getting started Basic usage TypeScript TS support is baked in, and if you're using the snapTo API use BottomSheetRef : Customizing the CSS Using CSS Custom Properties These are all the variables available to customize the look and feel when using the provided CSS. Custom CSS It's recommended that you copy from style.css into your own project, and add this to your postcss.config.js setup ( npm i postcss-custom-properties-fallback ): Demos Basic View demo code MVP example, showing what you get by implementing open , onDismiss and a single snap point always set to minHeight . Snap points & overflow View demo code A more elaborate example that showcases how snap points work. It also shows how it behaves if you want it to be open by default, and not closable. Notice how it responds if you resize the window, or scroll to the bottom and starts adjusting the height of the sheet without scrolling back up first. Sticky header","default_branch":null,"files":null,"tree":[],"storefront":"/r/stipsan","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/stipsan/react-spring-bottom-sheet/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}