@kenetto/uikit-modal

uikit-modal

Uikit Modal Window

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 {
    ...
}