@kenetto/uikit-modal

Uikit Modal Window

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@kenetto/uikit-modal
1.1.54 years ago4 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

<thead>
<tr>
    <th style="width: 100px;">name</th>
    <th style="width: 50px;">type</th>
    <th style="width: 50px;">required</th>
    <th style="width: 50px;">default</th>
    <th>description</th>
</tr>
</thead>
<tbody>
    <tr>
      <td>title</td>
      <td>String</td>
      <td>Yes</td>
      <td></td>
      <td>Title of the Modal</td>
    </tr>
    <tr>
      <td>toggleModal</td>
      <td>Function</td>
      <td>Yes</td>
      <td></td>
      <td>A function to toggle the modal visibility</td>
    </tr>
    <tr>
      <td>modalIsOpen</td>
      <td>Bool</td>
      <td>Yes</td>
      <td></td>
      <td>Indicates if the modal is open</td>
    </tr>
    <tr>
      <td>footer</td>
      <td>() => React.Node</td>
      <td>No</td>
      <td></td>
      <td>The footer of the modal</td>
    </tr>
    <tr>
      <td>children</td>
      <td>() => React.Node</td>
      <td>Yes</td>
      <td></td>
      <td>The content of the modal</td>
    </tr>
    <tr>
      <td>width</td>
      <td>string</td>
      <td>No</td>
      <td>small</td>
      <td>Indicate what type of width the modal will have. Must be one of the following values:<br/><br/><p>xsmall, small, large, expand</p></td>
    </tr>
    <tr>
      <td>disableClosing</td>
      <td>Bool</td>
      <td>No</td>
      <td>false</td>
      <td>Disables the modal to be closed</td>
    </tr>
</tbody>

Styling the components

Example

.modal-window {
    ...
}

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

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

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