Empower your React applications with caarlosdamian-hooks, a versatile collection of meticulously crafted hooks. These hooks are designed to enhance your productivity, simplify state management, and seamlessly integrate APIs, providing a streamlined development experience. With caarlosdamian-hooks, you can leverage reusable functionalities to make your application development faster and more efficient.
- useArray: Manages an array state within your React components, offering a variety of methods for array manipulation.
- useCursor: Designed to track and return the cursor's position on the screen.
- useDebounce: Debounce function calls, delaying execution for improved performance in scenarios like search operations or other asynchronous tasks.
- useDoubleClick: Allows you to handle both single-click and double-click events with ease. You can use it to define custom behavior when a user clicks once or double-clicks on an element.
- useEffectOnce: Execute a callback only once when a component mounts.
- useFetch: Simplify data fetching in React components with ease.
- useScreenDetails: Simplifies the retrieval of screen dimensions within your React components.
- useScroll: Simplifies the management of scroll-related events within your React components. Provides information about the scroll direction and allows you to define callbacks for various scroll scenarios.
- useSlider: Easy and effective way to create slider functionality in your React applications.
- useTimer: Designed to simplify the management of timers and timeouts within your React components. It provides functions to set and clear timers, making it easier to perform actions after a specified delay.
- useToggle: Effortlessly manage boolean state with a toggle function.
- useForm: Simplifies form handling in React applications, providing an easy way to manage form state and handle input changes.
- useRefState: A hook for maintaining a mutable reference which does not trigger re-renders. Ideal for tracking values without affecting the component's output.
- useLocaleStorage: A hook designed for managing state in React components while persisting the state data to the browser's local storage. This hook is particularly useful for scenarios where you need to maintain state across page reloads or component unmounts.
- useAsync: Simplifies handling of asynchronous operations in React components by managing loading, error, and data states with ease.
npm install caarlosdamian-hooks
or
yarn add caarlosdamian-hooks
The useToggle hook simplifies the management of boolean state within your React components. Here's a brief example of how to use it:
import { useToggle } from 'caarlosdamian-hooks';
function App() {
// Destructure the hook return values
const [isToggled, toggle] = useToggle();
return (
<>
{/* Button to toggle the state */}
<button onClick={toggle}>
{isToggled ? 'It Works!' : "Doesn't Work!"}
</button>
</>
);
}
export default App;The useScreenDetails hook simplifies the retrieval of screen dimensions within your React components. Here's a brief example of how to use it:
import React from 'react';
import { useScreenDetails } from './useScreenDetails';
const ScreenDetailsComponent: React.FC = () => {
const { width, height } = useScreenDetails();
return (
<div>
<h2>Screen Details</h2>
<p>Width: {width}px</p>
<p>Height: {height}px</p>
</div>
);
};
export default ScreenDetailsComponent;The useScroll hook is a React custom hook designed to simplify the management of scroll-related events within your components. It provides information about the scroll direction and allows you to define callbacks for various scroll scenarios.
import React from 'react';
import { useScroll } from './useScroll';
const ScrollComponent: React.FC = () => {
const handleScrollUp = () => {
console.log('Scrolling Up!');
// Add your custom logic for scrolling up
};
const handleScrollDown = () => {
console.log('Scrolling Down!');
// Add your custom logic for scrolling down
};
const handleScroll = () => {
console.log('Scrolling...');
// Add your custom logic for general scrolling
};
const { scrollDirection } = useScroll({
callbackUp: handleScrollUp,
callbackDown: handleScrollDown,
callbackOnScroll: handleScroll,
});
return (
<div>
<h2>Scroll Information</h2>
<p>Scroll Direction: {scrollDirection}</p>
{/* Add additional components or UI elements based on scroll information */}
</div>
);
};
export default ScrollComponent;The useEffectOnce hook allows you to run a callback function only once when a React component mounts. Here's a brief example of how to use it:
import { useEffectOnce } from 'caarlosdamian-hooks';
function App() {
// This callback will be executed only once when the component mounts
useEffectOnce(() => {
console.log('Component has mounted!');
// Perform any one-time initialization or side effects here
});
return <>{/* Your component JSX */}</>;
}The useFetch hook streamlines data fetching in your React components. It provides an easy-to-use interface for handling asynchronous requests and managing loading, data, and error states. Here's an example of how to use it:
import { useFetch } from 'caarlosdamian-hooks';
function App() {
// Define the fetch parameters
const fetchConfig = {
url: 'https://api.example.com/data',
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
};
// Destructure the hook return values
const { isLoading, data, error, isError } = useFetch(fetchConfig);
return (
<>
{isLoading && <p>Loading...</p>}
{isError && <p>Error occurred while fetching data.</p>}
{data && <p>Data: {JSON.stringify(data)}</p>}
</>
);
}The useDebounce hook allows you to debounce function calls, delaying execution for improved performance in scenarios like search operations or other asynchronous tasks. Here's a brief example of how to use it:
import { useDebounce } from './caarlosdamian-hooks';
const DebounceExample: React.FC = () => {
const [searchTerm, setSearchTerm] = useState('');
// Debounce the search function
const debouncedSearch = useDebounce(async (term: string) => {
// Perform your asynchronous search operation here
console.log('Searching for:', term);
}, 300); // Debounce for 300 milliseconds
// Handle changes in the search input
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const newSearchTerm = event.target.value;
setSearchTerm(newSearchTerm);
// Call the debounced search function with the latest search term
debouncedSearch(newSearchTerm);
};
return (
<div>
<input
type="text"
value={searchTerm}
onChange={handleSearchChange}
placeholder="Search..."
/>
<p>Performing a debounced search for: {searchTerm}</p>
</div>
);
};
export default DebounceExample;The useCursor hook tracks the cursor's position on the screen, providing x and y coordinates in real-time. It's perfect for creating interactive UI elements or for tracking user interaction within your application. Here's a simple example:
import React from 'react';
import { useCursor } from 'caarlosdamian-hooks';
const CursorPositionComponent: React.FC = () => {
const { positionX, positionY } = useCursor();
return (
<div>
<h2>Cursor Position</h2>
<p>
X: {positionX}, Y: {positionY}
</p>
</div>
);
};
export default CursorPositionComponent;The useDoubleClick hook is a React hook designed to simplify handling both single-click and double-click events on elements in your application. It allows you to define custom behavior for single and double clicks with ease. Here's a simple example:
import { useDoubleClick } from 'caarlosdamian-hooks';
import React from 'react';
function MyComponent() {
const handleSingleClick = (event) => {
console.log('Single click event:', event);
// Perform actions for a single click
};
const handleDoubleClick = (event) => {
console.log('Double click event:', event);
// Perform actions for a double click
};
const handleClick = useDoubleClick(handleDoubleClick, handleSingleClick);
return <button onClick={handleClick}>Click me (single or double)!</button>;
}
export default MyComponent;The useTimer hook simplifies the handling of timers in your React components. Here's a simple example:
import { useTimer } from 'caarlosdamian-hooks';
function TimerComponent() {
const { setTimer, clearTimer } = useTimer();
// Function to be executed after a delay
const delayedFunction = () => {
console.log('Timer callback executed!');
};
// Start a timer to execute the function after 2000 milliseconds (2 seconds)
const startTimer = () => {
setTimer(delayedFunction, 2000);
};
// Stop the timer if needed
const stopTimer = () => {
clearTimer();
};
return (
<>
<button onClick={startTimer}>Start Timer</button>
<button onClick={stopTimer}>Stop Timer</button>
</>
);
}
export default TimerComponent;The useArray hook is designed to manage and manipulate array states within your React components seamlessly. It provides methods for adding, removing elements, and more, ensuring efficient state management and reactivity. Here's a simple example:
import { useArray } from 'caarlosdamian-hooks';
function App() {
// Initialize the hook with an initial array
const {
array,
addElementAtTheEnd,
addElementAtPosition,
removeElement,
removeFirstElement,
removeLastElement,
resetArray,
replaceArray,
getElementAtIndex,
} = useArray([1, 2, 3]);
// Example usage
return (
<div>
{/* Display array */}
<div>Array: {array.join(', ')}</div>
{/* Add element at the end */}
<button onClick={() => addElementAtTheEnd(4)}>Add 4 at the end</button>
{/* Add element at position */}
<button onClick={() => addElementAtPosition(5, 2)}>Add 5 at position 2</button>
{/* Remove first element */}
<button onClick={removeFirstElement}>Remove first element</button>
{/* Remove last element */}
<button onClick={removeLastElement}>Remove last element</button>
{/* Reset array */}
<button onClick={resetArray}>Reset Array</button>
{/* Replace array */}
<button onClick={() => replaceArray([10, 20, 30])}>Replace Array</button>
{/* Get element at index */}
<div>Element at index 1: {getElementAtIndex(1)}</div>
</div>
);
}
export default App;The useSlider hook provides an easy and effective way to create slider functionality in your React applications. It is designed to handle the navigation through an array of items, allowing you to cycle through them either forward or backward. Here's a simple example:
import { useSlider } from 'caarlosdamian-hooks';
const ImageSlider = ({ images }) => {
const { actualPosition, goNext, goPrevius, goToItem } = useSlider(images);
return (
<div>
<button onClick={goPrevius}>Previous</button>
<img src={images[actualPosition]} alt="Slider Image" />
<button onClick={() => goToItem(index)}>GoToItem</button>
<button onClick={goNext}>Next</button>
</div>
);
};The useForm hook simplifies form handling in React applications, providing an easy way to manage form state and handle input changes. Here's a simple example:
import { useForm } from 'caarlosdamian-hooks';
function FormComponent() {
const { values, handleChange, watch } = useForm({ name: '', email: '' });
const handleSubmit = (e) => {
e.preventDefault();
console.log(values); // Do something with the form values
};
return (
<form onSubmit={handleSubmit}>
<input
name="name"
value={values.name}
onChange={handleChange}
placeholder="Name"
/>
<input
name="email"
value={values.email}
onChange={handleChange}
placeholder="Email"
/>
<button type="submit">Submit</button>
</form>
);
}
The useRefState hook provides a way to manage a reference in React that persists across re-renders but does not cause re-renders itself. It's useful for tracking values or states within a component that do not directly impact the rendering output, such as storing the previous value of a state or managing focus without triggering unnecessary updates. Here's a simple example:
import { useRefState } from 'caarlosdamian-hooks';
function MyComponent() {
// Initialize useRefState hook
const { ref, setRef } = useRefState();
// Function to update the ref's current value
const updateRef = () => {
setRef(Math.random()); // Example: Update the ref to a random number
console.log(ref); // Access the updated ref value
};
return (
<div>
<p>The current ref value is: {ref.current}</p>
<button onClick={updateRef}>Update Ref</button>
</div>
);
}
export default MyComponent;
The useLocaleStorage hook allows you to store and retrieve stateful data in the local storage of the browser. It takes a key to identify the stored data, a default value to be used when the data is not found in the local storage, and options for serialization and deserialization of the stored data. Here's a simple example:
import React from 'react';
import { useLocaleStorage } from 'caarlosdamian-hooks';
function MyComponent() {
// Example usage of useLocaleStorage hook
const [data, setData] = useLocaleStorage('myDataKey', 'default value');
// Modify data using setData function
const updateData = () => {
setData('new value');
};
return (
<div>
<p>Data stored in local storage: {data}</p>
<button onClick={updateData}>Update Data</button>
</div>
);
}
export default MyComponent;The useAsync hook simplifies handling of asynchronous operations in React components by managing loading, error, and data states with ease. It takes no parameters and returns an object containing the current state of the asynchronous operation and a function to run asynchronous tasks. Here's a simple example:
import React, { useState } from 'react';
import { useAsync } from 'caarlosdamian-hooks';
function MyComponent() {
// Example usage of useAsync hook
const { status, data, error, run } = useAsync();
// State to store input value
const [inputValue, setInputValue] = useState('');
// Function to fetch data asynchronously
const fetchData = async () => {
// Simulating fetching data from an API
try {
const response = await fetch(`https://api.example.com/data?q=${inputValue}`);
const data = await response.json();
// Updating data state
run(data);
} catch (error) {
// Handling errors
run(error);
}
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Enter search query"
/>
<button onClick={fetchData}>Fetch Data</button>
{/* Display loading state */}
{status === 'loading' && <p>Loading...</p>}
{/* Display error if any */}
{status === 'error' && <p>Error: {error.message}</p>}
{/* Display data if available */}
{status === 'success' && (
<div>
<p>Data:</p>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
)}
</div>
);
}
export default MyComponent;