❤
npm
Sign UpSign In

modal-simple

1.0.19 • Public • Published

Modal-Simple

This is a simple quick and customizable modal component that you can use in your App. The modal is based on bootstrap.

Installation

    npm i modal-simple react-bootstrap

and don't forget to add the bootstrap's stylesheet <link> into your <head> before all other stylesheets to load CSS :

LINK TO BOOTSTRAP STYLESHEET

Demo

If you just want to try out Modal-Simple, you can also use :

codesandbox

or use our :

storybook

Examples

  1. Simple use

    <Modal title={{ text: "title" }} bodyText="something" />

exempl-1

  1. Simple Custom

    <Modal
      open={{
        text: "Open me",
        className: "open",
        variant: "secondary"
      }}
      title={{ text: "title" }}
      closeBtn={{ show: false }}
    >
      <strong>test 2</strong>
     
      <Modal.Footer validate={{ text: "Validate", variant: "primary" }} />
    </Modal>

exemple-2

  1. Hard custom

    state = { show: false };
    modalState = () => {
    this.setState({ show: !this.state.show });
    };
    render() {
        return (
        <div className="App">
            <button className="open" onClick={this.modalState}>
            "Open"
            </button>
            <Modal
                show = {this.state.show}
                onHide = {this.modalState}
                closeBtn = {{ show: true, className: "btn-close" }}
                className = {{
                    modal: "modal-block-App",
                    header: "header-block",
                    body: "body-block",
                    footer: "footer-block"
                }}
                <Modal.Header>
                    <h1 className='title'>Hard Custom</h1>
                </Modal.Header>
                <Modal.Body>
                    <div className="d-flex flex-row body-block">
                        <img src={logo} alt="logo"/>
                        <img src={logo} alt="logo"/>
                        test
                    </div>
                </Modal.Body>
     
                <Modal.Footer
                    validate = {{
                        text: "Validate",
                        action: this.modalState,
                        className: "btn-valid"
                    }} ,
                    cancel = {{
                        text: "Close",
                        action: this.modalState,
                        className: "btn-cancel"
                    }}
                />
            </Modal>
        </div>
        )
    }

exemple-3

API

Modal

Name Type Default Description
show boolean false When true the modal will
show itself.
onHide function A callback fired when the
header closeButton or
non-static backdrop is
clicked. Required if either
specified.
title object text: string
className: string		 Specify the header
title and className.
closeBtn object show : Boolean
className : string		 Specify if you need the
close button appear
and apply a class.
className object modal: string
header: string
body: string
footer: string
 Add a className to each
part to be able to
custom them.
footer boolean true if you don't want
the block footer appear
set it to false.
open object text: string
className: string
variant: string		 You can custom the provide
button by your own text
and style.

Modal.Footer

Name Type Default Description
validate object text: string
action: function
className:string
variant:string		 You can custom the provide
button by your own text
and style.
cancel object text: string
action: function
className:string
variant:string		 You can custom the provide
button by your own text
and style.

Readme

Keywords

Package Sidebar

Install

npm i modal-simple

Repository

github.com/veensy/Modal-Simple

Homepage

github.com/veensy/Modal-Simple#readme

Weekly Downloads

0

Version

1.0.19

License

MIT

Unpacked Size

475 kB

Total Files

30

Last publish

Collaborators

  • veensy
Try on RunKit
Report malware