react-debounce-button v1.0.5
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.