@kenetto/uikit-modal

Uikit Modal Window

Stats

StarsIssuesVersionUpdatedCreatedSize
@kenetto/uikit-modal
1.1.53 years ago3 years agoMinified + gzip package size for @kenetto/uikit-modal in KB

Readme

uikit-modal

Uikit Modal Window

npm

Install

npm install --save @kenetto/uikit-modal

Usage

import React from 'react'

import ModalWindow from '@kenetto/uikit-modal'

class Example extends React.Component {
  constructor () {
    super()
    this.state = {
      modalIsOpen: true
    }
    this.toggleModal = this.toggleModal.bind(this)
  }

  toggleModal () {
    this.setState({
      modalIsOpen: !this.state.modalIsOpen
    })
  }

  render () {
    return <div className='uk-container'>
      <button onClick={() => this.toggleModal()}>OPEN</button>
      <ModalWindow
        width={'small'}
        title={'Test'}
        toggleModal={this.toggleModal}
        modalIsOpen={this.state.modalIsOpen}
        footer={<div>
          <button className='uk-button uk-button-default uk-modal-close' type='button'>Cancel</button>
          <button className='uk-button uk-button-primary' type='button'>Save</button>
        </div>}>
        <div>
          <h1>Modal content goes here</h1>
        </div>
      </ModalWindow>
    </div>
  }
}

export default Example

Props

name type required default description
title String Yes Title of the Modal
toggleModal Function Yes A function to toggle the modal visibility
modalIsOpen Bool Yes Indicates if the modal is open
footer () => React.Node No The footer of the modal
children () => React.Node Yes The content of the modal
width string No small Indicate what type of width the modal will have. Must be one of the following values:

xsmall, small, large, expand

disableClosing Bool No false Disables the modal to be closed

##Styling the components

###Example


.modal-window {
    ...
}

.modal-window > .header {
    ...
}

.modal-window > .body {
    ...
}

.modal-window > .footer {
    ...
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.