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

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|