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.