@kenetto/uikit-modal v1.1.5

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

##Styling the components

###Example

.modal-window {
    ...
}

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

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

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