react-debounce-button

🔘 A React component that elegantly handles multiple rapid clicks to enhance user experience and prevent unintended actions.

react-debounce-button is a specialized React button component designed to enhance user experience by preventing unintended repeated actions caused by rapid consecutive clicks. It's lightweight, customizable, and inherits all the properties of a button element, ensuring seamless integration into your React applications.

Installation

npm install react-debounce-button

or

yarn add react-debounce-button

Usage

Step 1: Use the Component

Simply import and use the DebounceButton component in your React application:

import DebounceButton from 'react-debounce-button';

function App() {
    return (
        <DebounceButton onClick={() => console.log("Button clicked!")}>
            Click Me!
        </DebounceButton>
    );
}

Props of DebounceButton Component

The DebounceButton component inherits all the properties of a button element, allowing for easy customization and styling. Additionally, it has a specific prop to control the debounce time:

| Prop | Type | Default | Description | |-------------|------------------------------------|---------|-------------------------------------------------------------------------------------------------------| | debounceTime | 'number' | '300' | Specifies the debounce time in milliseconds. Determines how long to wait before registering another click.|

Usage Example

You can use other button properties like id, className, and style for further customization:

import DebounceButton from 'react-debounce-button';

function ExampleComponent() {
    return (
        <DebounceButton
            debounceTime={500}
            id='example'
            className='custom-class'
            style={{ backgroundColor: 'lightblue' }}
            onClick={() => console.log("Button clicked!")}
        >
            Click Me!
        </DebounceButton>
    );
}

About the Author

This component library is developed and maintained by zqsun. If you encounter any issues or have suggestions, please feel free to open an issue on the GitHub repository.