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

@arnat/styled-modalTypeScript icon, indicating that this package has built-in type declarations

0.0.12 • Public • Published

ARNAT - styled-modal

npm Travis branch Codecov branch storybook lerna

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.

Install

npm i @arnat/styled-modal

DownloadsWeekly Downloads

1

Version

0.0.12

License

MIT

Unpacked Size

38.9 kB

Total Files

13

Last publish

Collaborators

  • avatar
  • avatar