Gathering detailed insights and metrics for toju-react-hooks
Gathering detailed insights and metrics for toju-react-hooks
Gathering detailed insights and metrics for toju-react-hooks
Gathering detailed insights and metrics for toju-react-hooks
npm install toju-react-hooks
Typescript
Module System
Node Version
NPM Version
TypeScript (92.44%)
JavaScript (4.38%)
HTML (1.88%)
Shell (1.3%)
Total
438
Last Day
5
Last Week
10
Last Month
19
Last Year
438
21 Commits
6 Branches
1 Contributors
Latest Version
1.0.4
Package Id
toju-react-hooks@1.0.4
Unpacked Size
221.44 kB
Size
65.02 kB
File Count
31
NPM Version
10.7.0
Node Version
18.20.4
Publised On
15 Aug 2024
Cumulative downloads
Total Downloads
Last day
0%
5
Compared to previous day
Last week
400%
10
Compared to previous week
Last month
-5%
19
Compared to previous month
Last year
0%
438
Compared to previous year
3
23
toju-react-hooks library is a tool designed to facilitate React application development by providing a series of custom hooks. These hooks are designed to address common problems and frequent usage patterns in application development, allowing developers to manage state, side effects, context, and more, efficiently and with less boilerplate code. The library focuses on improving code readability, component reusability, and performance optimization, ensuring that React applications are more maintainable and scalable.
1npm install toju-react-hooks
Function | Description |
---|---|
useCounter(options) | Manage numeric state with increment, decrement, and reset capabilities |
useEvent(callback) | Memorize and optimize event handlers |
useIsInView(options) | Determine if a referenced element is within the viewport |
useThrottle(fn, delay) | Throttle a function execution to limit how often it can be called |
useWindowsResize() | Track window resize events and provide the current window dimensions |
useDebounce(fn, delay) | Debounce a function execution to limit how often it can be called |
useMediaQuery(query) | Evaluate a media query and return a boolean indicating if it matches |
useMedia() | Evaluate multiple media queries and return their respective boolean values |
Function | Description |
---|---|
withTracking(WrappedComponent, trackEvent, options) | Enhance a component with automatic event tracking capabilities |
useCounter
Custom hook for managing numeric state with increment, decrement, and reset capabilities.
options
: Object with the following property:
initialValue
(optional, default = 0): The initial value of the counter.UseCounterReturn
: An object containing:
value
(number): The current value of the counter.reset
(function): Resets the counter to its initial value.increment
(function): Increments the counter by a specified value (default is 1).decrement
(function): Decrements the counter by a specified value (default is 1).1const { value, reset, increment, decrement } = useCounter({ initialValue: 10 }); 2 3// Increment the counter 4increment(); 5 6// Decrement the counter 7decrement(); 8 9// Reset the counter to the initial value 10reset();
useEvent
Custom hook to memorize and optimize event handlers.
callback
: Function to be memorized and called by the event handler.1const onClick = useEvent(() => { 2 console.log('Clicked'); 3}); 4 5return <button onClick={onClick}>Click me</button>;
useIsInView
Custom hook that determines if a referenced element is within the viewport using the Intersection Observer API.
options
: Object with the following properties:
ref
(React.RefObject): A React ref attached to the element you want to check for visibility.threshold
(number | number[], optional): A single number or an array of numbers indicating at what percentage of the target's visibility the observer's callback should be executed.rootMargin
(string, optional): A string representing the margin around the root. Allows the callback to execute even if the target is not in the viewport but within this margin.isInView
(boolean): A boolean value indicating whether the referenced element is in the viewport.1import React, { useRef } from 'react'; 2import { useIsInView } from 'toju-react-hooks'; 3 4const Component = () => { 5 const ref = useRef(null); 6 const isInView = useIsInView({ ref, threshold: 0.1 }); 7 8 return ( 9 <div ref={ref}> 10 {isInView ? 'In view!' : 'Not in view!'} 11 </div> 12 ); 13};
useThrottle
Custom hook to throttle a function execution, limiting how often it can be called.
fn
: The function to be throttled.delay
: The time (in milliseconds) to wait before the next function call can be executed.1import React, { useState } from 'react'; 2import { useThrottle } from 'toju-react-hooks'; 3 4const ThrottledComponent = () => { 5 const [count, setCount] = useState(0); 6 const throttledIncrement = useThrottle(() => setCount(count + 1), 1000); 7 8 return ( 9 <div> 10 <p>{count}</p> 11 <button onClick={throttledIncrement}>Increment</button> 12 </div> 13 ); 14};
useWindowsResize
Custom hook to track window resize events and provide the current window dimensions.
UseWindowsResizeReturn
: An object containing:
width
(number): The current width of the window.height
(number): The current height of the window.1import React from 'react'; 2import { useWindowsResize } from 'toju-react-hooks'; 3 4const Component = () => { 5 const { width, height } = useWindowsResize(); 6 7 return ( 8 <div> 9 <p>Window width: {width}</p> 10 <p>Window height: {height}</p> 11 </div> 12 ); 13};
useDebounce
Custom hook to debounce a function execution, limiting how often it can be called.
fn
: The function to be throttled.delay
: The time (in milliseconds) to wait before the function can be called again.1import React, { useState } from 'react'; 2import { useDebounce } from 'toju-react-hooks'; 3 4const DebouncedComponent = () => { 5 const [searchTerm, setSearchTerm] = useState(''); 6 const debouncedSearch = useDebounce((term) => { 7 // Perform search with the term 8 console.log('Searching for:', term); 9 }, 500); 10 11 const handleChange = (event) => { 12 setSearchTerm(event.target.value); 13 debouncedSearch(event.target.value); 14 }; 15 16 return ( 17 <div> 18 <input type="text" value={searchTerm} onChange={handleChange} /> 19 </div> 20 ); 21};
useMediaQuery
Custom hook to evaluate a media query and return a boolean indicating if it matches.
query
: The media query string to be evaluated.true
) or not (false
).1import React from 'react'; 2import { useMediaQuery } from 'toju-react-hooks'; 3 4const ResponsiveComponent = () => { 5 const isMobile = useMediaQuery('(max-width: 767px)'); 6 7 return ( 8 <div> 9 {isMobile ? ( 10 <p>Estás en un dispositivo móvil</p> 11 ) : ( 12 <p>Estás en un dispositivo de escritorio</p> 13 )} 14 </div> 15 ); 16};
useMedia
Custom hook to evaluate multiple media queries and return their respective boolean values.
An object containing boolean values for each media query:
isMobile
: Indicates if the viewport matches the mobile media query.isTablet
: Indicates if the viewport matches the tablet media query.isDesktop
: Indicates if the viewport matches the desktop media query.isBigDesktop
: Indicates if the viewport matches the big desktop media query.isLessThanDesktop
: Indicates if the viewport matches the less than desktop media query.isMoreThanMobile
: Indicates if the viewport matches the more than mobile media query.1import React from 'react'; 2import { useMedia } from 'toju-react-hooks'; 3 4const ResponsiveComponent = () => { 5 const { 6 isMobile, 7 isTablet, 8 isDesktop, 9 isBigDesktop, 10 isLessThanDesktop, 11 isMoreThanMobile 12 } = useMedia(); 13 14 return ( 15 <div> 16 {isMobile && <p>Estás en un dispositivo móvil</p>} 17 {isTablet && <p>Estás en un dispositivo tablet</p>} 18 {isDesktop && <p>Estás en un dispositivo de escritorio</p>} 19 {isBigDesktop && <p>Estás en un dispositivo de escritorio grande</p>} 20 {isLessThanDesktop && <p>Estás en un dispositivo menor que un escritorio</p>} 21 {isMoreThanMobile && <p>Estás en un dispositivo mayor que un móvil</p>} 22 </div> 23 ); 24};
Higher-order component (HOC) designed to enhance a component with tracking capabilities. It allows tracking events such as mounting, unmounting, clicking, mouse entering, and being in view.
WrappedComponent (ComponentType<P>)
: The component to be enhanced with tracking functionality.trackEvent (TrackEventFunction)
: Function to execute when tracking an event.options (TrackingOptions)
: Configuration object for tracking behavior. Includes:
trackOnMount (boolean, optional)
: If true, tracks when the component mounts.trackOnUnmount (boolean, optional)
: If true, tracks when the component unmounts.trackOnClick (boolean, optional)
: If true, tracks when the component is clicked.trackOnMouseEnter (boolean, optional)
: If true, tracks when the mouse enters the component.trackOnInView (boolean, optional)
: If true, tracks when the component is in view.additionalData (object, optional)
: Additional data to be sent with the tracking event.React.FC<P>
: A functional component that wraps the WrappedComponent with added tracking functionality.
1import React from 'react'; 2import { withTracking } from 'toju-react-hooks'; 3import MyComponent from './MyComponent'; 4 5const trackEvent = (eventName, data) => { 6 console.log(`Event: ${eventName}`, data); 7}; 8 9const TrackingOptions = { 10 trackOnMount: true, 11 trackOnUnmount: true, 12 trackOnClick: true, 13 trackOnMouseEnter: true, 14 trackOnInView: true, 15 additionalData: { extraInfo: 'moreData' } 16}; 17 18const TrackedMyComponent = withTracking(MyComponent, trackEvent, TrackingOptions); 19 20const App = () => ( 21 <div> 22 <TrackedMyComponent /> 23 </div> 24);
Contributions are welcome. Please open an issue or pull request to suggest changes or improvements.
This README file provides an overview of the package, installation instructions, usage examples for each feature, instructions for running the tests and an invitation to contribute.
No vulnerabilities found.
No security vulnerabilities found.