# @arnat/styled-modal

> The bootstrap modal component created with styled-components

Latest version **0.0.12** (published 2019-12-30) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.12 |
| Published | 2019-12-30 |
| First published | 2019-12-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 37.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Arnat Technologies |
| Maintainers | arnat.technologies, rsurjano |
| Keywords | arnat, components, react, react-component, ui, styled-components, modal, bootstrap, presentational, stateless |

## Links

- npm: https://www.npmjs.com/package/@arnat/styled-modal
- Repository: https://github.com/arnat-technologies/styles
- Issues: https://github.com/arnat-technologies/styles/issues
- npm.io page: https://npm.io/package/@arnat/styled-modal

## Dependencies (2)

- [@arnat/styled-base](https://npm.io/package/@arnat/styled-base.md) ^0.0.12
- [@arnat/styled-config](https://npm.io/package/@arnat/styled-config.md) ^0.0.11

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.0.12 (latest) — 2019-12-30
- 0.0.11 — 2019-12-29
- 0.0.10 — 2019-12-28
- 0.0.9 — 2019-12-22
- 0.0.7 — 2019-12-21
- 0.0.6 — 2019-12-21
- 0.0.4 — 2019-12-15
- 0.0.3 — 2019-12-14
- 0.0.2 — 2019-12-14
- 0.0.1 — 2019-12-09

## README

# ARNAT - styled-modal

[![npm](https://img.shields.io/npm/v/@arnat/styled-modal.svg?style=flat-square)](https://www.npmjs.com/package/@arnat/styled-modal)
[![Travis branch](https://img.shields.io/travis/arnat-technologies/styles/master.svg?style=flat-square)](https://travis-ci.org/arnat-technologies/styles)
[![Codecov branch](https://img.shields.io/codecov/c/github/arnat-technologies/styles/master.svg?style=flat-square)](https://codecov.io/gh/arnat-technologies/styles)
[![storybook](https://img.shields.io/badge/docs%20with-storybook-f1618c.svg?style=flat-square)](https://arnat-technologies.github.io/styles)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg?style=flat-square)](https://lernajs.io/)

Modular approach to use [bootstrap](https://getbootstrap.com)
components for quick prototypes, as an entrypoint of the component
library.

## Usage

```jsx
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.

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