ARNAT - styled-modal

Modular approach to use bootstrap components for quick prototypes, as an entrypoint of the component library.

Usage

import React, { useState } from 'react';

import { Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@arnat/styled-modal';

export const ModalExample = () => {
  const [hidden, setHidden] = useState(true);

  return (
    <div>
      <Modal hidden={hidden} toggle={() => setHidden(!hidden)}>
        <ModalHeader>
          <ModalTitle>Modal Title</ModalTitle>

          <button outline onClick={() => setHidden(!hidden)}>
            <span aria-hidden="true">&times;</span>
          </button>
        </ModalHeader>

        <ModalBody>Modal body text goes here.</ModalBody>

        <ModalFooter>
          <button onClick={() => setHidden(!hidden)}>Close</button>
        </ModalFooter>
      </Modal>

      <button block danger onClick={() => setHidden(!hidden)}>
        Launch Modal
      </button>
    </div>
  );
};

Properties

Properties which can be added to the component to change the visual appearance.

• sm only on Modal Type: boolean
• lg only on Modal Type: boolean
• hidden only on Modal Type: boolean
• toggle only on Modal Type: function
• centered only on Modal Type: boolean
• backdrop only on Modal Type: boolean or string
• noRadius only on Modal Type: boolean
• returnFocusAfterClose only on Modal Type: boolean
• transitionProps only on Modal Type: object
• wrapperProps only on Modal Type: object
• dialogProps only on Modal Type: object
• contentProps only on Modal Type: object
• backdropProps only on Modal Type: object
• TransitionComponent only on Modal Type: Component (with forwarded ref)
• ModalWrapperComponent only on Modal Type: Component (with forwarded ref)
• ModalDialogComponent only on Modal Type: Component
• ModalBackdropComponent only on Modal Type: Component
• ModalContentComponent only on Modal Type: Component

Property backdrop can be set to false or 'static' to prevent dialog from closing on click outsite of the window.