đź”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Modalian is a simple react modal component to create modal windows and alert/confirm dialog boxes with pleasing features.

Modal_Popup React

Documentation

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.


You May Also Like