How to use the styled-react-modal.default 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
// COMPONENTS
import { ModalHeader, StyledHeader } from './Header';
import { ModalContent, StyledContent } from './Content';
import { ModalFooter, StyledFooter } from './Footer';
import { ModalClose } from './Close';

export type ModalSize = 'lg' | 'sm';

const Sizes = {
    lg: { width: 50, contentPadding: 2.5, footerHeight: 6.5 },
    sm: { width: 25, contentPadding: 2, footerHeight: 5.5 },
};

const defaultSize: ModalSize = 'lg';

const StyledModal = StyledReactModal.default.styled`
    position: relative;
    width: ${({ width, size = defaultSize }: ModalProps) =>
        width || `${Sizes[size].width}rem`};
    height: ${({ height = '42.375rem' }: ModalProps) => height};
    margin: ${({ margin = 'auto' }: ModalProps) => margin};

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;

    ${({ background = 'white', color }: ModalProps) =>
        css({
            background: th.color(background),
            color,
            borderRadius: 'modal',

styled-react-modal

A React modal built with styled-components.

Unlicense
Latest version published 4 months ago

Package Health Score

67 / 100
Full package analysis