Have ideas to improve npm?Join in the discussion! »

    react-pure-modal
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.19 • Public • Published

    react-pure-modal npm package Build Status

    NPM

    React pure modal is a simplest way to create dialog on your site.

    • Very small (less than 4Kb)
    • Mobile friendly
    • Without dependencies

    Demo

    https://memcrab.github.io/react-pure-modal/

    Installation

    npm i -S react-pure-modal

    Usage

    import PureModal from 'react-pure-modal';
    import 'react-pure-modal/dist/react-pure-modal.min.css';
    
    const [modal, setModal] = useState(false);
    
    <PureModal
      header="Your header"
      footer={
        <div>
          <button>Cancel</button>
          <button>Save</button>
        </div>
      }
      isOpen={modal}
      closeButton="close"
      closeButtonPosition="bottom"
      onClose={() => {
        setModal(false);
        return true;
      }}
    >
      <p>Your content</p>
    </PureModal>;

    And open with

    <button className="button" onClick={() => setModal(true)}>Open simple modal</button>

    Options

    replace boolean (default: false)

    Replace all inner markup with Component children

    isOpen: boolean

    Control modal state from parent component

    scrollable: boolean (default: true)

    You can disable scroll in modal body

    draggable: boolean (default: false)

    You can drag a modal window

    onClose: Function

    Handle modal closing. Should return true if you allow closing

    className: string

    ClassName for modal DOM element, can be used for set modal width or change behaviour on mobile devices

    width: string (example '200px')

    Width in pixels, em's, vw etc

    header: JSX.Element | string

    Modal heading, doesn't disabled close button

    footer: JSX.Element | string

    Place here your actions

    closeButton: (JSX.Element | string)

    Content of your closing button

    closeButtonPosition: string

    Place closing button under your modal or inside header. Allowed options: 'header' | 'bottom'

    portal: boolean (default: false)

    Creates React.Portal

    Changelog (latest on top)

    • Drag and drop
    • fix bug in firefox and safari with modal position
    • set width as atribute
    • new default aligning to the screen center!
    • prevent of modal closing if ESC pressed in editable element
    • now with minified css!
    • styles are more impressive now, good mobile support
    • now scrollable can be false
    • remove dependencies, rewrite open and close logic, fix linting
    • new header logic and breaking classes changes

    Developing

    • npm install
    • npm run webpack:dev -- --watch
    • npm run webpack:prod -- --watch
    • npm run test:dev
    • Open index.html from examples

    Install

    npm i react-pure-modal

    DownloadsWeekly Downloads

    163

    Version

    2.0.19

    License

    ISC

    Unpacked Size

    3.97 MB

    Total Files

    31

    Last publish

    Collaborators

    • avatar