# react-native-confirm-dialog

> Custom confirmation and alert dialogs for react native

Latest version **0.1.0** (published 2020-10-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-confirm-dialog
pnpm add react-native-confirm-dialog
yarn add react-native-confirm-dialog
bun add react-native-confirm-dialog
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2020-10-12 |
| First published | 2020-10-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Alon Dahari |
| Maintainers | climbinghobo |
| Keywords | react-native, react-component, react-native-component, react, react native, mobile, ios, android, ui, confirm, dialog, alert, expo |

## Links

- npm: https://www.npmjs.com/package/react-native-confirm-dialog
- Repository: https://github.com/jazzdragon/react-native-confirm-dialog
- Issues: https://github.com/jazzdragon/react-native-confirm-dialog/issues
- npm.io page: https://npm.io/package/react-native-confirm-dialog

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2020-10-12
- 0.0.13 — 2020-10-12
- 0.0.12 — 2020-10-12
- 0.0.11 — 2020-10-12
- 0.0.10 — 2020-10-11
- 0.0.8 — 2020-10-11
- 0.0.7 — 2020-10-11

## README

React Native Confirm Dialog
=======================================

Fully customizable, plug-and-play confirmation and alert dialogs for your
react-native / expo app.

* * *

### Features

*   Get going fast with basic styling and sensible defaults.
*   Action buttons with loading states.
*   Theme-able.
*   Dissmisable on outside clicks. 

### Usage

* Wrap your application in `<ConfirmProvider>`
* Use anywhere with `useConfirm()` hook

### Demo

[Try it out on Expo snack](#) 

### Basic Demo

```tsx
import React from 'react';
import { Button } from 'react-native'
import { ConfirmProvider, useConfirm } from 'react-native-confirm-dialog'

const ConfirmableButton = () => {
  const confirm = useConfirm()
  const handlePress = () => {
    confirm({
      // ...config options
    })
  }
  
  return <Button onPress={ handlePress } title='Confirm this!' />
}

export default function App() {

  return (
    <ConfirmProvider>
        <ConfirmableButton />
    </ConfirmProvider>
  );
}

```

Check out the `example` folder for a full example.

### Download & Installation

```shell 
$ yarn add react-native-confirm-dialog
```

### Configuration Options

All of the configurations are optional with sensible defaults, and can be overriden
when calling `confirm` or provided to `ConfirmProvider` as a `config` prop. Configuration
options provided when calling `confirm` take precedence over options provided to `ConfirmProvider`

| Name                    | Description                                         | Type                                                        | Default               |
|-------------------------|-----------------------------------------------------|-------------------------------------------------------------|-----------------------|
| actions                 | Override the dialog buttons with a custom component | (dismiss: VoidFunction) => JSX.Element &#124; JSX.Element[] | `undefined`           |
| body                    | Description of the confirmation                     | String                                                      | `undefined`           |
| bodyStyle               | Style overrides for dialog body                     | TextStyle                                                   | `undefined`           |
| ButtonComponent         | Override the component used for the buttons         | Function Component                                          | EnhancedButton            |
| buttonProps             | custom props to pass to both buttons                | any                                                         | `undefined`           |
| buttonLabelStyle        | Style overrides for both button labels              | TextStyle                                                   | `undefined`           |
| buttonStyle             | Style overrides for both buttons                    | ViewStyle                                                   | `undefined`           |
| cancelLabel             | Text of the secondary button                        | String                                                      | "Cancel"              |
| cancelButtonProps       | custom props to pass to secondary button            | any                                                         | `undefined`           |
| cancelButtonLabelStyle  | Style overrides for secondary button label          | TextStyle                                                   | `undefined`           |
| cancelButtonStyle       | Style overrides for secondary button                | ViewStyle                                                   | `undefined`           |
| confirmButtonProps      | custom props to pass to primary button              | any                                                         | `undefined`           |
| confirmButtonLabelStyle | Style overrides for primary button label            | TextStyle                                                   | `undefined`           |
| confirmButtonStyle      | Style overrides for primary button                  | ViewStyle                                                   | `undefined`           |
| confirmLabel            | Text of the primary button                          | String                                                      | "OK"                  |
| dismissOnOutsideClick   | Should the dialog be dismissed on an outside click? | Boolean                                                     | `true`                |
| onConfirm               | Callback action for primary button                  | VoidFunction                                                | `() => {}`            |
| showCancel              | Set to default to hide the secondary button         | Boolean                                                     | `true`                |
| subtitle                | Dimmed text right below the title                   | String                                                      | `undefined`           |
| subtitleStyle           | Style overrides for subtitle                        | TextStyle                                                   | `undefined`           |
| theme                   | Theme overrides                                     | Object                                                      | [see Theme section](#theme) |
| title                   | The title displayed in the confirm dialog           | String                                                      | "Are you sure?"       |
| titleStyle              | Style overrides for title                           | TextStyle                                                   | `undefined`           |

#### Theme

Control dialog look with a theme. Theme can be passed the same way as all the props above.

| Name            | Description                        | Type   | Default                |
|-----------------|------------------------------------|--------|------------------------|
| spacing         | Spacing between elements base unit | number | 8                      |
| primaryColor    | Color of primary elements          | string | "rgba(0, 0, 255, 0.5)" |
| backshadowColor | Color of dialog's backdrop         | string | "rgba(0, 0, 0, 0.4)"   |


### Contributing

Keep it simple. Keep it minimal. Add tests.

### License

This project is licensed under the MIT License

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