All Projects → arashmanteghi → modalian

arashmanteghi / modalian

Licence: MIT license
Modalian is a simple react modal component with pleasing features

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to modalian

Presentr
iOS let's you modally present any view controller, but if you want the presented view controller to not cover the whole screen or modify anything about its presentation or transition you have to use the Custom View Controller Presentation API's.
Stars: ✭ 2,816 (+11633.33%)
Mutual labels:  modal
fancybox
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
Stars: ✭ 7,261 (+30154.17%)
Mutual labels:  modal
vue-modal
Reusable Modal component, supports own custom HTML, text and classes.
Stars: ✭ 29 (+20.83%)
Mutual labels:  modal
Nativepopup
Clone of Apple iOS App's feedback popup, and easily customizable.
Stars: ✭ 247 (+929.17%)
Mutual labels:  modal
body-scroll-freezer
↕️ Dependency-free JS module to freeze body scroll when opening modal box
Stars: ✭ 22 (-8.33%)
Mutual labels:  modal
react-layer-stack
Layering system for React. Useful for popover/modals/tooltip/dnd application
Stars: ✭ 158 (+558.33%)
Mutual labels:  modal
Intense Images
A simple library to view large images up close using simple mouse interaction, and the full screen.
Stars: ✭ 2,539 (+10479.17%)
Mutual labels:  modal
SPLarkController
Custom transition between controllers. Settings controller for your iOS app.
Stars: ✭ 967 (+3929.17%)
Mutual labels:  modal
toppy
Overlay library for Angular 7+
Stars: ✭ 81 (+237.5%)
Mutual labels:  modal
LSDialogViewController
Custom Dialog for iOS written in Swift
Stars: ✭ 74 (+208.33%)
Mutual labels:  modal
Micromodal
⭕ Tiny javascript library for creating accessible modal dialogs
Stars: ✭ 3,008 (+12433.33%)
Mutual labels:  modal
react-st-modal
Simple and flexible modal dialog component for React JS
Stars: ✭ 41 (+70.83%)
Mutual labels:  modal
musicWebTemplate
Free website template built for musicians / artists to promote their music and connect to their audience.
Stars: ✭ 26 (+8.33%)
Mutual labels:  modal
Django Bootstrap Modal Forms
A Django plugin for creating AJAX driven forms in Bootstrap modal.
Stars: ✭ 244 (+916.67%)
Mutual labels:  modal
HalfModal
HalfModal mimics the behavior of the drawer of Apple's shortcut application. It is realized using a combination of UIViewPropertyAnimator.
Stars: ✭ 24 (+0%)
Mutual labels:  modal
Tua Body Scroll Lock
🔐 Body scroll locking that just works with everything
Stars: ✭ 236 (+883.33%)
Mutual labels:  modal
MultiDialog
MultiDialog utilizes jQuery UI Dialog Widget for a full featured Modalbox / Lightbox application.
Stars: ✭ 23 (-4.17%)
Mutual labels:  modal
sweet-modal-vue
The sweetest library to happen to modals.
Stars: ✭ 762 (+3075%)
Mutual labels:  modal
MultiModal
Use multiple .sheet, .alert, etc. modifiers in the same SwiftUI View
Stars: ✭ 49 (+104.17%)
Mutual labels:  modal
jpopup
Simple lightweight (<2kB) javascript popup modal plugin
Stars: ✭ 27 (+12.5%)
Mutual labels:  modal

Modalian

Modalian is a simple react modal component. You can visit online Demo

Install

Install with npm or Yarn:

npm:

npm install modalian --save

Yarn :

yarn add modalian

Usage

import Modalian, { Confirm } from 'modalian';

<Modalian
  visible={this.state.modalVisible}
  onClose={this.toggleModal}
  title='Invite developers to use Modalian'
  okBtnText='Invite'
  onOk={() => { console.log('click on OK'); }}
  onCancel={() => { console.log('click on Cancel'); this.toggleModal(); }}
>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</Modalian>

<Confirm
  visible={this.state.confirmVisible}
  onClose={this.toggleConfirm}
  confirmBtnText='Confirm'
  onConfirm={() => { console.log('click on Confirm'); }}
  onCancel={() => { console.log('click on Cancel'); this.toggleConfirm(); }}
  title='Are you sure about it?'
  description='you cant undo this action'
/>

Modalian options:

Property Description Type Default
visible show or hide modal boolean -
onClose calles when a user clicks close icon function -
onOk calles when a user clicks OK button function -
onCancel calles when a user clicks Cancel button function -
title makes header for modal and show title there string -
footer set null/false if you don't need default footer boolean true
okBtnText specify text of OK button string Ok
cancelBtnText specify text of Cancel button string Cancel
closable specify modal has close icon or not boolean true
closableMask specify when user clicks on mask modal will close boolean true
rtl makes modal right to left boolean false

Confirm options:

Property Description Type Default
visible show or hide confirm boolean -
onClose calles when a user clicks close icon function -
onConfirm calles when a user clicks Confirm button function -
onCancel calles when a user clicks Cancel button function -
title defines title of confirm box string -
description defines title of confirm box string -
confirmBtnText specify text of Confirm button string Ok
cancelBtnText specify text of Cancel button string Cancel
rtl makes confirm modal right to left boolean false

Lunch demo as indepented project

  1. git clone https://github.com/arashmanteghi/modalian.git
  2. Run npm install
  3. Start the dev-server using npm start
  4. Open http://localhost:3000

Commands

  • npm start - start the dev-server
  • npm run dist - build as production

Licence

Modalian is available under MIT licence.

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].