Modal component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Table Of Contents

    Modal component for React using some CSS styles from Bootstrap as well as custom CSS styles.

    https://www.npmjs.com/package/library-modal-component

    Install and save component as a dependency

    
    npm install --save library-modal-component
    
    

    Install Bootstrap as a dependency

    
    npm install --save bootstrap
    
    

    Import component into your app

    
    import ModalComponent from 'library-modal-component'
    
    

    Import Bootstrap Javascript into your app

    
    import 'bootstrap/dist/js/bootstrap.bundle.js'
    
    

    Create the function that will handle the modal confirm

    
    handleModalConfirm (event, modalId) {
        document.getElementById(modalId).click()
    }
    
    

    Render the component with the functions we created as well as any other props that are needed

    
    render () {
        return (
            <ModalComponent
                modalTheme="light"
                modalId="modalId"
                modalTitle="Modal title"
                modalBody="Modal body"
          modalCloseText="Close"
                modalClose="closeModal"
          modalConfirmText="Confirm"
                handleModalConfirm={this.handleModalConfirm.bind(this)} />
        )
    }
    
    
    Prop Values
    modalTheme light or dark
    modalId String
    modalTitle String
    modalBody String
    modalCloseText String
    modalClose String
    modalConfirmText String
    modalConfirm handleModalConfirm function

    Bronson Dunbar

    I'm a WordPress fanatic, a fan of React & AWS and a Sass magician! I also enjoy capturing moments through the lens of my Canon https://adobe.ly/2HkE1SZ

    Leave a Reply

    Your email address will not be published. Required fields are marked *