styled-modal-component
The bootstrap modal component made with styled-components.
This is a modular approach to use bootstrap components for quick prototypes, as an entrypoint of your own component library, or if you need just one bootstrap component for your application.
Installation
npm install --save styled-modal-componentnpm install --save styled-components@^4.1.3 react@^16.7.0 # Peer dependencies
Usage
For detailed information take a look at the documentation.
import React useState from 'react'; import Modal ModalBody ModalFooter ModalHeader ModalTitle from 'styled-modal-component'; const ModalExample = const hidden setHidden = ; return <div> <Modal = => <ModalHeader> <ModalTitle>Modal Title</ModalTitle> <button => <span ="true">×</span> </button> </ModalHeader> <ModalBody> Modal body text goes here </ModalBody> <ModalFooter> <button =>Close</button> </ModalFooter> </Modal> <button => Launch Modal </button> </div> ;
Properties
Properties which can be added to the component to change the visual appearance.
sm
only on Modal Type: booleanlg
only on Modal Type: booleanhidden
only on Modal Type: booleantoggle
only on Modal Type: functioncentered
only on Modal Type: booleanbackdrop
only on Modal Type: boolean or stringnoRadius
only on Modal Type: booleanreturnFocusAfterClose
only on Modal Type: booleantransitionProps
only on Modal Type: objectwrapperProps
only on Modal Type: objectdialogProps
only on Modal Type: objectcontentProps
only on Modal Type: objectbackdropProps
only on Modal Type: objectTransitionComponent
only on Modal Type: Component (with forwarded ref)ModalWrapperComponent
only on Modal Type: Component (with forwarded ref)ModalDialogComponent
only on Modal Type: ComponentModalBackdropComponent
only on Modal Type: ComponentModalContentComponent
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.
License
MIT © Lukas Aichbauer