Neurological Phenomenon Multiplexer
    Wondering what’s next for npm?Check out our public roadmap! »

    @nature-ui/alert-dialog
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    @nature-ui/alert-dialog

    AlertDialog component is used interrupt the user with a mandatory confirmation or action.

    Installation

    yarn add @nature-ui/alert-dialog
    
    # or
    
    npm i @nature-ui/alert-dialog

    Import components

    import {
      AlertDialog,
      AlertDialogBody,
      AlertDialogFooter,
      AlertDialogHeader,
      AlertDialogContent,
      AlertDialogOverlay,
    } from '@nature-ui/core';

    Basic usage

    Usage

    AlertDialog requires that you provide the leastDestructiveRef prop.

    Based on WAI-ARIA specifications, focus should be placed on the least destructive element when the dialog opens, to prevent users from accidentally confirming the destructive action.

    function AlertDialogExample() {
      const [isOpen, setIsOpen] = React.useState();
      const onClose = () => setIsOpen(false);
      const cancelRef = React.useRef();
    
      return (
        <>
          <Button onClick={() => setIsOpen(true)}>Delete Customer</Button>
    
          <AlertDialog
            isOpen={isOpen}
            leastDestructiveRef={cancelRef}
            onClose={onClose}
          >
            <AlertDialogOverlay>
              <AlertDialogContent>
                <AlertDialogHeader>Please Confirm!</AlertDialogHeader>
                <AlertDialogBody>
                  Are you sure you want to delete something? This action is
                  permanent, and we're totally not just flipping a field called
                  "deleted" to "true" in our database, we're actually deleting
                  something.
                </AlertDialogBody>
                <AlertDialogFooter>
                  <Button
                    ref={cancelRef}
                    onClick={onClose}
                    className='bg-gray-200 hover:bg-gray-300'
                  >
                    Nevermind
                  </Button>
                  <Button className='ml-3' variant='outline'>
                    Yes, delete
                  </Button>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialogOverlay>
          </AlertDialog>
        </>
      );
    }

    Install

    npm i @nature-ui/alert-dialog

    DownloadsWeekly Downloads

    3

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    15.5 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar