How to use the styled-react-modal.BaseModalBackground function in styled-react-modal

To help you get started, we’ve selected a few styled-react-modal examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github RetailMeNot / anchor / src / Modal / Modal.component.tsx View on Github external
{children}
    
);

Modal.Content = ModalContent;
Modal.Header = ModalHeader;
Modal.Footer = ModalFooter;
Modal.Close = ModalClose;

interface BaseModalBackgroundProps {
    opacity?: number;
    oversized?: boolean;
    padding?: string;
}

const CustomModalBackground = styled(StyledReactModal.BaseModalBackground)`
    box-sizing: border-box;
    overflow-y: auto;
    padding: ${({ padding = '2rem 1rem' }: BaseModalBackgroundProps) =>
        padding};
    background-color: ${({ opacity = 0.6 }: BaseModalBackgroundProps) =>
        `rgba(0,0,0,${opacity})`};
`;
export const BaseModalBackground = CustomModalBackground;

export class ModalProvider extends StyledReactModal.ModalProvider {
    static defaultProps = { backgroundComponent: BaseModalBackground };
}

styled-react-modal

A React modal built with styled-components.

Unlicense
Latest version published 12 months ago

Package Health Score

68 / 100
Full package analysis