1.0.2 • Published 1 year ago

button-confirm-tk v1.0.2

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

button-confirm-tk

Description

The ButtonConfirm component is a React component designed to provide a customizable confirmation popover for user interactions. It offers a convenient way to prompt users for confirmation before executing a critical action, such as deleting an item or submitting a form.

Key Features:

  1. Customizable Content: Users can define the body text, header text, and button labels to tailor the confirmation popover to their specific use case.
  2. Flexible Trigger Button: The component accepts any JSX element as the trigger button, allowing developers to integrate the confirmation functionality seamlessly into their application's UI.
  3. Event Handling: Developers can specify callback functions to be executed upon confirmation or cancellation, enabling them to perform appropriate actions based on user input.
  4. Z-index Control: The component provides control over the z-index of the popover, ensuring proper layering with other UI elements.

Installation

You can install ButtonConfirm via npm:

npm install button-confirm-tk

or

yarn add button-confirm-tk

Application Screenshot

Usage

import React from 'react';
import ButtonConfirm from 'button-confirm-tk';

const MyComponent = () => {
  return (
    <div>
      <ButtonConfirm
        onConfirm={() => {
          // handle confirmation
        }}
        onClose={() => {
          // handle close
        }}
        body="Are you sure you want to proceed?"
        btnContent={<button>Open Confirmation</button>}
        btnClass="my-button-class"
        header="Confirmation"
        zIndex={1000}
        okeTxt="OK"
        closeTxt="Cancel"
      />
    </div>
  );
};

export default MyComponent;

Props

NameTypeDescription
onConfirmFunctionFunction to execute when the confirm button is clicked.
onCloseFunctionFunction to execute when the close button is clicked.
bodystringBody text of the confirmation popover.
btnContentJSX.ElementJSX element for the button that triggers the confirmation popover.
btnClassstringCSS class for the trigger button.
headerstringHeader text of the confirmation popover.
zIndexnumberZ-index of the popover.
okeTxtstringText for the confirm button.
closeTxtstringText for the close button.

Version

1.0.0

Author

tk0038

License

ISC

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago