# @eteg/react-modals

> Custom components relating based on Zendesk Garden Design System

Latest version **1.0.0** (published 2022-11-04) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @eteg/react-modals
pnpm add @eteg/react-modals
yarn add @eteg/react-modals
bun add @eteg/react-modals
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-11-04 |
| First published | 2022-11-04 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 25.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ETEG |
| Maintainers | vitorpeixoto, augustobritodev, eteg-owner |
| Keywords | components, garden, react, zendesk, eteg |

## Links

- npm: https://www.npmjs.com/package/@eteg/react-modals
- Repository: https://github.com/eteg/mt-react-components
- Homepage: https://eteg.com.br
- Issues: https://github.com/eteg/mt-react-components/issues
- npm.io page: https://npm.io/package/@eteg/react-modals

## Dependencies (3)

- [react-icons](https://npm.io/package/react-icons.md) ^4.6.0
- [@zendeskgarden/react-buttons](https://npm.io/package/@zendeskgarden/react-buttons.md) ^8.59.1
- [@zendeskgarden/react-dropdowns](https://npm.io/package/@zendeskgarden/react-dropdowns.md) ^8.59.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2022-11-04

## README

# @garden/components [![npm version](https://flat.badgen.net/npm/v/@zendeskgarden/react-notifications)](https://www.npmjs.com/package/@zendeskgarden/react-notifications)

This package includes several varieties of modals within
the [Garden Design System](https://zendeskgarden.github.io/).

## Installation

```sh
npm install @garden/components

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-buttons @zendeskgarden/react-theming react-icons --save
```

## Usage

```jsx
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Modal } from '@garden/components';
import { useState } from 'react';

/**
 * Place a `ThemeProvider` at the root of your React application
 */

const modalButtons: PropsButtonModal[] = [
  {
    text: 'Loading',
    function: () => console.log('Loading'),
    isPrimary: true,
    isLoading: true
  },
  {
    text: 'Delete',
    function: () => console.log('Delete'),
    isPrimary: true,
    isDanger: true
  },
  {
    text: 'Confirm',
    function: () => console.log('Confirm'),
    isPrimary: true
  }
];

export function App() {
  const [buttonsModal, setButtonsModal] = useState < boolean > false;

  return (
    <ThemeProvider>
      <Button onClick={() => setButtonsModal(true)}>Open Buttons Modal</Button>
      <Modal
        modalClose={() => setButtonsModal(false)}
        isOpen={buttonsModal}
        title="Lorem ipsum dolor sit amet"
        buttons={modalButtons}
      >
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ullamcorper lacus.
          Nunc tempor aliquet quam id ullamcorper. Nunc a ex velit. Etiam commodo a eros eget
          posuere.
        </p>
      </Modal>
    </ThemeProvider>
  );
}
```

## Modal Component

### Extends HTMLAttributes<HTMLDivElement>

The Modal Component applies appropriate styles based on its usage and the props provided.

| Prop name     | Type      | Default         | Description                                                                                                                     | Required |
| ------------- | --------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------- | -------- |
| modalClose    | function  |                 | Function that closes the Modal                                                                                                  | yes      |
| isOpen        | boolean   |                 | If `true`, the modal will be opened.                                                                                            | yes      |
| title         | string    |                 | Title that will appear in the header                                                                                            | yes      |
| modalWidth    | string    | '60%'           | Modal width on Screen                                                                                                           | no       |
| alignButtons  | string    | 'space-between' | Distribution of buttons along the main-axis of a flex container                                                                 | no       |
| isScrolling   | boolean   | `false`         | If `true`, modal body has overflow-y: scroll                                                                                    | no       |
| modalIsDanger | boolean   | `false`         | If `true`, applies danger styling                                                                                               | no       |
| maxMenuHeight | string    | '150px'         | Maximum height of a Select input inside the Modal body                                                                          | no       |
| buttons       | Buttons[] |                 | Array with the Buttons that will appear in the modal, check the section below (Modal Buttons) for the properties of each button | no       |

## Modal Buttons

### Extends ButtonHTMLAttributes<HTMLButtonElement>

The Modal Buttons applies appropriate styles based on its usage and the props provided.

| Prop name   | Type     | Default | Description                                                                    | Required |
| ----------- | -------- | ------- | ------------------------------------------------------------------------------ | -------- |
| text        | string   |         | Button Text                                                                    | yes      |
| function    | function |         | Button onClick function                                                        | yes      |
| isPrimary   | boolean  | `false` | If `true`, applies primary button styling                                      | no       |
| isBasic     | boolean  | `false` | If `true`, applies basic button styling                                        | no       |
| isDanger    | boolean  | `false` | If `true`, applies danger button styling                                       | no       |
| isLoading   | boolean  | `false` | If `true`, applies loading button styling                                      | no       |
| disabled    | boolean  | `false` | If `true`, disable the button and applies disabled button styling              | no       |
| marginButto | string   | 0       | Used when the buttons are aligned left or right, to leave a space between them | no       |

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