# @types/styled-react-modal

> TypeScript definitions for styled-react-modal

Latest version **3.1.0** (published 2024-10-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @types/styled-react-modal
pnpm add @types/styled-react-modal
yarn add @types/styled-react-modal
bun add @types/styled-react-modal
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; no vulnerabilities; high maintenance score; popular repo; extremely popular.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2024-10-30 |
| First published | 2018-10-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 51444 |
| Maintainers | types |

## Links

- npm: https://www.npmjs.com/package/@types/styled-react-modal
- Repository: https://github.com/DefinitelyTyped/DefinitelyTyped
- Homepage: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/styled-react-modal
- npm.io page: https://npm.io/package/@types/styled-react-modal

## Dependencies (2)

- [@types/react](https://npm.io/package/@types/react.md) *
- [@types/styled-components](https://npm.io/package/@types/styled-components.md) *

## Recent versions

- 3.1.0 (latest) — 2024-10-30
- 1.2.5 (ts4.5) — 2023-11-07
- 1.2.2 (ts3.8) — 2021-12-24
- 1.2.1 (ts3.6) — 2021-07-02
- 1.2.0 (ts2.9) — 2019-05-06
- 1.0.0 (ts2.8) — 2018-10-05
- 1.2.4 — 2023-10-18
- 1.2.3 — 2023-09-25
- 1.1.1 — 2019-01-26
- 1.1.0 — 2018-11-13

## README

# Installation
> `npm install --save @types/styled-react-modal`

# Summary
This package contains type definitions for styled-react-modal (https://github.com/AlexanderRichey/styled-react-modal).

# Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/styled-react-modal.
## [index.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/styled-react-modal/index.d.ts)
````ts
import * as React from "react";
import {
    AnyStyledComponent,
    CSSObject,
    InterpolationFunction,
    StyledComponent,
    ThemedStyledFunctionBase,
} from "styled-components";

export const BaseModalBackground: StyledComponent<"div", any>;

export interface ModalProps {
    children?: React.ReactNode | undefined;
    /**
     * A boolean that indicates whether the modal is to be open or closed.
     */
    isOpen: boolean;
    /**
     * When true, scrolling in the document body is not disabled when the modal is open.
     */
    allowScroll?: boolean | undefined;
    /**
     * A props object that is spread over the `backgroundComponent` when included.
     */
    backgroundProps?: object | undefined;
    /**
     * A function that is called after the modal opens.
     */
    afterOpen?: (() => void) | undefined;
    /**
     * A function that is called after the modal closes.
     */
    afterClose?: (() => void) | undefined;
    /**
     * A function that is called before the modal opens.
     * If this function returns a promise, then the modal is opened after the promise is resolved.
     */
    beforeOpen?: (() => void | Promise<void>) | undefined;
    /**
     * A function that is called before the modal closes.
     * If this function returns a promise, then the modal is closed after the promise is resolved.
     */
    beforeClose?: (() => void | Promise<void>) | undefined;
    /**
     * A function that is called when the escape key is pressed while the modal is open.
     */
    onEscapeKeydown?: ((event: React.KeyboardEvent) => void) | undefined;
    /**
     * A function that is called when the modal background is clicked.
     */
    onBackgroundClick?: ((event: React.MouseEvent) => void) | undefined;
}

export interface ModalProviderProps {
    children: React.ReactNode;
    /**
     * A styled component to be used as the default modal background.
     * If not provided, library defaults will be used.
     *
     * @default BaseModalBackground
     */
    backgroundComponent?: AnyStyledComponent | undefined;
}

export class ModalProvider extends React.Component<ModalProviderProps> {}

export default class StyledReactModel extends React.Component<ModalProps> {
    /**
     * Factory method that accepts a tagged template literal and returns a `<Modal>` component
     * with styles included.
     */
    static styled: (
        ...args: Parameters<ThemedStyledFunctionBase<"div", any>>
    ) => typeof StyledReactModel;
}

````

### Additional Details
 * Last updated: Wed, 30 Oct 2024 17:34:16 GMT
 * Dependencies: [@types/react](https://npmjs.com/package/@types/react), [@types/styled-components](https://npmjs.com/package/@types/styled-components)

# Credits
These definitions were written by [Greg Perlman](https://github.com/gperl27).

---
_Source: https://npm.io/package/@types/styled-react-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._