GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → hanford → React Drag Drawer

hanford / React Drag Drawer

A responsive mobile drawer that is draggable on mobile, and falls back to a modal on desktop

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactmobilemodalisomorphictouchdraggable

Projects that are alternatives of or similar to React Drag Drawer

Cupertino Pane
🎉📱Multi-functional panes and boards for next generation progressive applications
Stars: ✭ 267 (+97.78%)
Mutual labels:  mobile, modal, touch
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+21765.93%)
Mutual labels:  mobile, touch
Trip
移动前端开发经验指南
Stars: ✭ 550 (+307.41%)
Mutual labels:  mobile, touch
React Native Bottomsheet Reanimated
React Native bottom sheet with fully native 60 FPS animations and awesome user experience
Stars: ✭ 80 (-40.74%)
Mutual labels:  mobile, modal
Gijgo
Gijgo - Free Javascript Controls
Stars: ✭ 424 (+214.07%)
Mutual labels:  modal, draggable
React Fastclick
Fast Touch Events for React
Stars: ✭ 476 (+252.59%)
Mutual labels:  mobile, touch
Vue Draggablecal
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped
Stars: ✭ 79 (-41.48%)
Mutual labels:  mobile, draggable
Body Scroll Lock
Body scroll locking that just works with everything 😏
Stars: ✭ 3,357 (+2386.67%)
Mutual labels:  mobile, modal
Mars
腾讯移动 Web 前端知识库
Stars: ✭ 9,255 (+6755.56%)
Mutual labels:  mobile, touch
React Swipeable
React swipe event handler hook
Stars: ✭ 1,348 (+898.52%)
Mutual labels:  mobile, touch
Ant Design Draggable Modal
The Modal from Ant Design, draggable.
Stars: ✭ 105 (-22.22%)
Mutual labels:  modal, draggable
Better Gesture
A gesture library use for pc, mobile, vue, and mini programs
Stars: ✭ 419 (+210.37%)
Mutual labels:  mobile, touch
Vue Gallery
📷 Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
Stars: ✭ 405 (+200%)
Mutual labels:  mobile, touch
Sortable
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Stars: ✭ 23,641 (+17411.85%)
Mutual labels:  draggable, touch
Framework7
Full featured HTML framework for building iOS & Android apps
Stars: ✭ 16,560 (+12166.67%)
Mutual labels:  mobile, touch
React Poppop
A mobile support and multi-directional modal for ReactJS
Stars: ✭ 78 (-42.22%)
Mutual labels:  mobile, modal
Hover On Touch
A pure Javascript Plugin for an alternative hover function that works on mobile and desktop devices. It triggers a hover css class on »Taphold« and goes to a possible link on »Tap«. It works with all html elements.
Stars: ✭ 256 (+89.63%)
Mutual labels:  mobile, touch
Interact.js
JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
Stars: ✭ 10,561 (+7722.96%)
Mutual labels:  mobile, touch
React Easy Swipe
Easy handler for common swipe operations
Stars: ✭ 85 (-37.04%)
Mutual labels:  mobile, touch
Embla Carousel
A lightweight carousel library with fluid motion and great swipe precision.
Stars: ✭ 1,874 (+1288.15%)
Mutual labels:  mobile, touch
View All Similar Projects ➔

react-drag-drawer

npm package

Mobile draggable drawer that falls back to modals on desktop

Live demo!

Install

$ npm install react-drag-drawer --save

Usage

import Drawer from 'react-drag-drawer'

..

toggle = () => {
  let { toggle } = this.state

  this.setState({ toggle: !toggle })
}

render () {
  const { open } = this.state

  return (
    <Drawer
      open={open}
      onRequestClose={this.toggle}
    >
      <div>Hey Im inside the drawer!</div>
    </Drawer>
  )
}

API

Param Type functionality required
open Boolean null true
children Node null true
onRequestClose Function null true
onDrag Function invoked on drag false
onOpen Function invoked on drawer focus false
notifyWillClose Function notify consumer if the drawer will close at touch release false
allowClose Boolean block closing if allowClose={false}, default is true false
modalElementClass String className to be applied to top element false
containerElementClass String className to be applied to the drawer container element false
parentElement ref block scrolls on element if you're not using body scrolling false
direction String direction to translate drawer false
dontApplyListeners Boolean skip applying internal event listeners to the dom false
inViewportChange Function detect when drawer is at top of viewport false
getModalRef Function get modal (draggable element) ref false
getContainerRef Function get container (overlay) ref false

Example modal style

.modal {
  outline: none;
  background: white;
  font-size: 1.6rem;
  width: 76rem;
  max-width: 90%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  z-index: 15;
  min-height: 47rem;

  will-change: transform;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 768px) {
  .modal {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}

License

MIT © Jack Hanford

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].