1.0.12 • Published 9 years ago

react-modal-with-keys-action v1.0.12

Weekly downloads
1
License
MIT
Repository
github
Last release
9 years ago

react-modal-with-keys-action

React modal component with keydown event Listener.

Installation

npm install react-modal-with-keys-action --save

Usage

Props

closeModalAction

  • required
  • function

This action is performed when user clicks anywere beyond modal window.

handleKeyDownEvent

  • optional
  • boolean

Set true to enable modalKeysActions. If set false or not set, modalKeysActions are disabled.

modalKeysActions

  • optional
  • array of objects. Object props are:
    • key
      • reqiured
      • number (key code)
    • action
      • required only when multiKeys is not set true
      • function (performed on key press)
    • multiKeys
      • optional
      • boolean (Set true if want perform action when multiple keys are pressed)
    • actions
      • required only when multiKeys is set true
      • array of objects. Object props are:
        • keys
          • required
          • array of strings (Supported values are 'Alt', 'Control' and 'Shift')
        • action
          • required
          • function (performed when all keys are pressed)

Example of modalKeysActions prop:

    const modalKeysActions = [{
      key:13,
      multiKeys:true,
      actions:[{
        keys:['Alt','Control', 'Shift'],
        action:this.acs
      },{
        keys:['Alt','Control'],
        action:this.ac
      },{
        keys:['Alt'],
        action:this.a
      },{
        keys:[],
        action:this.noMulti
      }]
    },{
      key:27,
      action:this.closeModalAction
    }]

Style

You can use your own style sheet. Good way to start is to use this css or stylus file.

Example

import React from 'react';
import Component from 'react-pure-render/component';
import Modal from 'react-modal-with-keys-action';
import './modal.styl';

export default class ModalDemo extends Component {

  constructor(){
    super();
    this.openModalAction = this.openModalAction.bind(this);
    this.closeModalAction = this.closeModalAction.bind(this);
    this.state = {
      isModalVisible: false
    }
  }

  openModalAction(){
    this.setState({
      isModalVisible: true
    })
  }

  closeModalAction(){
    this.setState({
      isModalVisible: false
    })
  }

  acs(){
    console.log('Key pressed: Enter + Alt + Control + Shift');
  }
  ac(){
    console.log('Key pressed: Enter + Alt + Control');
  }
  a(){
    console.log('Key pressed: Enter + Alt');
  }
  noMulti(){
    console.log('Key pressed: Enter');
  }

  render(){
    const {isModalVisible} = this.state;
    const ENTER_KEY = 13;
    const modalKeysActions = [{
      key:ENTER_KEY,
      multiKeys:true,
      actions:[{
        keys:['Alt','Control', 'Shift'],
        action:this.acs
      },{
        keys:['Alt','Control'],
        action:this.ac
      },{
        keys:['Alt'],
        action:this.a
      },{
        keys:[],
        action:this.noMulti
      }]
    },{
      key:27,
      multiKeys:false,
      action:this.closeModalAction
    }]
    return(
      <div>
        <button onClick={this.openModalAction}>Open modal</button>
        {isModalVisible&&
        <Modal closeModalAction={this.closeModalAction} modalKeysActions={modalKeysActions} handleKeyDownEvent={true}>
          <div>
            <p>Press esc to close modal, press enter to perform enterAction</p>
          </div>
        </Modal>}
      </div>
    )
  }
}
1.0.12

9 years ago

1.0.11

9 years ago

1.0.10

10 years ago

1.0.9

10 years ago

1.0.8

10 years ago

1.0.7

10 years ago

1.0.6

10 years ago

1.0.5

10 years ago

1.0.4

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago