pradel / React Responsive Modal
Licence: mit
Simple responsive react modal
Stars: ✭ 429
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to React Responsive Modal
Bootstrap4 Fs Modal
A simple way to improve UX of Bootstrap 4 modals on mobile phones.
Stars: ✭ 102 (-76.22%)
Mutual labels: modal, responsive
React Poppop
A mobile support and multi-directional modal for ReactJS
Stars: ✭ 78 (-81.82%)
Mutual labels: modal, responsive
Django Admin Interface
django's default admin interface made customizable. popup windows replaced by modals. :mage: ⚡️
Stars: ✭ 717 (+67.13%)
Mutual labels: modal, responsive
react-gallery-carousel
Mobile-friendly gallery carousel 🎠 with server side rendering, lazy loading, fullscreen, thumbnails, touch, mouse emulation, RTL, keyboard navigation and customisations.
Stars: ✭ 178 (-58.51%)
Mutual labels: responsive, modal
Photoviewer
🌀 A JS plugin to view images just like in Windows.
Stars: ✭ 203 (-52.68%)
Mutual labels: modal, responsive
Magnify
🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+!
Stars: ✭ 177 (-58.74%)
Mutual labels: modal, responsive
Lity
Lightweight, accessible and responsive lightbox.
Stars: ✭ 1,051 (+144.99%)
Mutual labels: modal, responsive
Baguettebox.js
⚡ Simple and easy to use lightbox script written in pure JavaScript
Stars: ✭ 2,252 (+424.94%)
Mutual labels: modal, responsive
fancybox
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
Stars: ✭ 7,261 (+1592.54%)
Mutual labels: responsive, modal
nglp-angular-material-landing-page
NGLP is an Angular Material Landing Page.
Stars: ✭ 32 (-92.54%)
Mutual labels: responsive, modal
Kube
Kube is a professional and a responsive Hugo theme for developers and designers that offers a documentation section mixed with a landing page and a blog.
Stars: ✭ 349 (-18.65%)
Mutual labels: responsive
Re Flex
Resizable Flex layout container components for advanced React web applications
Stars: ✭ 349 (-18.65%)
Mutual labels: responsive
Coderedcms
A content management system for marketing websites based on Django and Wagtail.
Stars: ✭ 386 (-10.02%)
Mutual labels: responsive
Detection
ASP.NET Core Detection with Responsive View for identifying details about client device, browser, engine, platform, & crawler. Responsive middleware for routing base upon request client device detection to specific view.
Stars: ✭ 335 (-21.91%)
Mutual labels: responsive
Element Queries Spec
A spec for a Container-Style Element Query Syntax
Stars: ✭ 375 (-12.59%)
Mutual labels: responsive
React Components By Ruvkr
A collection of Responsive Animated Mobile friendly Lightweight React Components
Stars: ✭ 319 (-25.64%)
Mutual labels: responsive
react-responsive-modal
A simple responsive and accessible react modal.
- Focus trap inside the modal.
- Centered modals.
- Scrolling modals.
- Multiple modals.
- Accessible modals.
- Easily customizable via props.
- Typescript support
- Small bundle size
Documentation
Installation
With npm: npm install react-responsive-modal --save
Or with yarn: yarn add react-responsive-modal
Usage
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'react-responsive-modal/styles.css';
import { Modal } from 'react-responsive-modal';
const App = () => {
const [open, setOpen] = useState(false);
const onOpenModal = () => setOpen(true);
const onCloseModal = () => setOpen(false);
return (
<div>
<button onClick={onOpenModal}>Open modal</button>
<Modal open={open} onClose={onCloseModal} center>
<h2>Simple centered modal</h2>
</Modal>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('app'));
Props
Check the documentation: https://react-responsive-modal.leopradel.com/#props.
License
MIT © Léo Pradel
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].