$ npm i @channelwill/hooks
# or
$ yarn add @channelwill/hooks
# or
$ pnpm add @channelwill/hooks- useArrayComparison: Compares two arrays for differences.
- useCommunication: Succinctly handles communication between components.
- useCurrencyConverter: Currency conversion tool, real-time exchange rate, covering free conversion of more than 180 currencies of Shopify.
- useCurrencyFormat: Formats international currency display.
- useEncryption: Data encryption/decryption operations.
- useError: Error handling tools, combined with error capture.
- useExportCSV: Export a CSV file.
- useForm: Form management, validation rule management.
- usePagination: Paging functionality.
- useScript: Dynamically load scripts via links.
- useVerification: Provides validation rule tools.
- useCountdown: Provides a countdown tool that supports both hour, minute, second and verification code countdown scenarios.
- useNetworkStatus: Used to monitor the user's network status.
- useKeyPress: Used to detect the pressed state of a specific key.
- useDebounce: debounce function.
- useMemorizedFn: Memoize functions and expand performance optimization methods.
- useMount: Called when the component is mounted.
- useSearchListener: Called when a URL query parameter changes.
- useThrottle: Throttling function.
- useToggle: Toggle state.
- useEventListener: Bind and listen to DOM events.
- useInViewport: Checks if an element is within the viewport.
- useIsMobile: Detect if it is a mobile device.
- useOnClickOutside: Fired when clicking outside.
- useOnceClick: Only handles a click event once.
- usePageLeave: Fired when leaving the page.
- useWindowSize: Get the window size.
- useScrollPosition: Used to get the current scroll position.
- useAnimationFrame: Used to execute callback functions in each animation frame, often used for performance optimization.
Here are some sample codes and demonstrations to help users better understand how to use these hooks.
Examples
import {useWindowSize, useEventListener} from '@channelwill/hooks';
const ExampleComponent = () => {
const {width, height} = useWindowSize();
const handleClick = () => {
console.log('Window clicked!');
};
useEventListener('click', handleClick);
return (
<div>
<h1>Current window size: {width} x {height}</h1>
</div>
);
};$ git clone git@github.com:Baoing/hooks.git
$ cd hooks
$ npm install
$ npm run startOpen browser access http://localhost:6006/
MIT License