react-native-confirm-dialog
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

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

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

$ 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 | 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
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

Package Sidebar

Install

npm i react-native-confirm-dialog

Weekly Downloads

29

Version

0.1.0

License

ISC

Unpacked Size

21.3 kB

Total Files

28

Last publish

Collaborators

  • climbinghobo