Nanometers Per Millisecond

    react-custom-modal

    0.0.4 • Public • Published

    react-custom-modal

    This component supports showing any custom modal dialog.

    It is possible to display by method call.

    Example

    NPM

    Install

    npm install react-custom-modal

    Usage

    import React, {Component} from 'react'
    import 'react-custom-modal/dist/index.css'
    import Modal from 'react-custom-modal'
     
    export default class App extends Component {
      constructor(props) {
        super(props)
        this.dialog = React.createRef()
        this.showDialog = this.showDialog.bind(this)
      }
     
      showDialog() {
        this.dialog.current.show({
          component: <CustomDialog/>,
          animation: 'slideUp'
        })
      }
     
      render() {
        return (
          <div>
            <button className='btn'
                    onClick={this.showDialog}>
              Show Dialog
            </button>
            <Modal className='Custom'
                   dialogClass='CustomDialog'
                   ref={this.dialog}/>
          </div>
        )
      }
    }
     
    class CustomDialog extends Component {
      render() {
        const {close} = this.props
        return (
          <div>
            <div className='modal-header'>
              <span className='title'>Modal title</span>
              <button className='close-btn' onClick={close}>
                <span>&times;</span>
              </button>
            </div>
            <div className='modal-body'>
              <p>Modal body text goes here.</p>
            </div>
            <div className='modal-footer'>
              <button className='btn' onClick={close}>Cancel</button>
              <button className='btn' onClick={close}>Save</button>
            </div>
          </div>
        )
      }
    }

    License

    MIT © sk39

    Keywords

    Install

    npm i react-custom-modal

    DownloadsWeekly Downloads

    3

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    35.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • sk39