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