stambekovbera / kandaysbln-react-dialog-confirmation

A lightweight React library that adds Dialog Confirmation functionality

Документация на русском

Installation

NPM

npm install kandaysbln-react-dialog-confirmation

YARN

yarn add kandaysbln-react-dialog-confirmation

---

Connecting the provider

1. Install the package using NPM or YARN as shown above

2. Import the provider and wrap your application with it

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { DialogConfirmationProvider } from 'kandaysbln-react-dialog-confirmation';

ReactDOM.createRoot( document.getElementById( 'root' )! ).render(
    <React.StrictMode>
        <DialogConfirmationProvider>
            <App/>
        </DialogConfirmationProvider>
    </React.StrictMode>,
);

Connecting the Dialog Component

1. Importing the component from the package

Import components from a package, and also import styles

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { DialogConfirmationProvider, DialogConfirmationModal } from 'kandaysbln-react-dialog-confirmation';
import 'kandaysbln-react-dialog-confirmation/kandaysbln-react-dialog-confirmation.css'

ReactDOM.createRoot( document.getElementById( 'root' )! ).render(
    <React.StrictMode>
        <DialogConfirmationProvider>
            <App/>
            <DialogConfirmationModal/>
        </DialogConfirmationProvider>
    </React.StrictMode>,
);

2. Creating your custom component and importing it

To develop your own component, you need to import the useDialogConfirmation hook. When using this hook, pass true as an argument if it's used in a component that will be used as a confirmation dialog. In other contexts, pass false.

import React from 'react';
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
import { useDialogConfirmation } from 'kandaysbln-react-dialog-confirmation';

const CustomDialogConfirmation: React.FC = () => {
    const {
        acceptEvent,
        cancelEvent,
        isOpen,
        cancelButtonText,
        acceptButtonText,
        description,
        title,
        onCloseDialogConfirmation,
    } = useDialogConfirmation( true );

    const onClose = React.useCallback( () => {
        onCloseDialogConfirmation();
    }, [ onCloseDialogConfirmation ] );

    const handleCloseEvent = React.useCallback( () => {
        if (cancelEvent) {
            cancelEvent();
        }

        onClose();
    }, [ cancelEvent, onClose ] );

    const handleAcceptEvent = React.useCallback( () => {
        if (acceptEvent) {
            acceptEvent();
        }

        onClose();
    }, [ acceptEvent, onClose ] );

    return (
        <Dialog
            fullWidth
            maxWidth='sm'
            open={ isOpen }
        >
            <DialogTitle>
                { title }
            </DialogTitle>
            <DialogContent>
                <DialogContentText>
                    { description }
                </DialogContentText>
            </DialogContent>
            <DialogActions>
                <Button
                    variant='outlined'
                    onClick={ handleCloseEvent }
                >
                    { cancelButtonText }
                </Button>
                <Button
                    variant='contained'
                    onClick={ handleAcceptEvent }
                >
                    { acceptButtonText }
                </Button>
            </DialogActions>
        </Dialog>
    );
};

export default CustomDialogConfirmation;

Import the created component

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { DialogConfirmationProvider } from 'kandaysbln-react-dialog-confirmation';
import CustomDialogConfirmation from "./components/CustomDialogConfirmation.tsx";

ReactDOM.createRoot( document.getElementById( 'root' )! ).render(
    <React.StrictMode>
        <DialogConfirmationProvider>
            <App/>
            <CustomDialogConfirmation/>
        </DialogConfirmationProvider>
    </React.StrictMode>,
);

Example of Usage

To use the confirmation functionality, import the useDialogConfirmation hook. When calling this hook, pass false as an argument. This component will return the onOpenDialogConfirmation method, which should be used in functions where confirmation of an action is required

import { useDialogConfirmation } from 'kandaysbln-react-dialog-confirmation';

function App() {
    const {
        onOpenDialogConfirmation
    } = useDialogConfirmation( false );

    const showDialogConfirmation = (isConfirm = false) => {
        if (!isConfirm) {
            onOpenDialogConfirmation( {
                title: 'Action confirmation',
                acceptEvent: showDialogConfirmation.bind( null, true ) // first argument context is null, second argument isConfirm is true
            } );

            return;
        }

        alert( 'Action confirmed!' );

        return;
    };

    return (
        <>
            <button onClick={ () => showDialogConfirmation( false ) }>
                Открыть
            </button>
        </>
    );
}

export default App

CSS variables

Variable	Description	Default value
--kandaysbln-modal-z-index	Element stack order	1000
--kandaysbln-modal-content-bg	Content background color	#FFF
--kandaysbln-overlay-bg	Overlay background color	rgb(0 0 0 / 70%)
--kandaysbln-duration	Animation duration	200ms
--kandaysbln-cancel-button-background-color	Cancel button background color	#000
--kandaysbln-cancel-button-text-color	Cancel button text color	#FFF
--kandaysbln-accept-button-background-color	Accept button background color	#000
--kandaysbln-accept-button-text-color	Accept button text color	#FFF