A collection of custom React hooks
npm install oceandev-hooksA collection of custom React hooks.
``sh`
npm install oceandev-hooksExample of Usage
:Here's an example of how to use the useScrollPosition hook in a React component.
`jsx
import React, { useRef } from 'react';
import { useScrollPosition } from 'oceandev-hooks';
function ScrollableComponent() {
// Use the custom hook
const [scrollPosition, scrollContainerRef, scrollTo, isAtBottom] = useScrollPosition();
const handleScrollToTop = () => {
scrollTo({ direction: 'top' });
};
const handleScrollToBottom = () => {
scrollTo({ direction: 'bottom' });
};
return (
{/ Display scroll position /}
Scroll Position: {scrollPosition.y}
{/ Buttons to scroll to top and bottom /}
{/ Display if at bottom /}
{isAtBottom ? 'At Bottom' : 'Not at Bottom'}
export default ScrollableComponent;
`useClickOutside:
Here's an example of how to use the useClickOutside hook in a React component.
`jsx
import React from 'react';
import useClickOutside from './useClickOutside';
function Dropdown() {
// Use the custom hook
const [isOpen, toggleOpen, elementRef, buttonRef] = useClickOutside(() => {
console.log('Clicked outside!');
});
return (
export default Dropdown;
`useCookieuseCookie
Here's an example of how to use the hook in a React component.
`jsx
import React, { useState } from 'react';
import useCookie from './useCookie';
function CookieComponent() {
// Use the custom hook
const [setCookie, getCookie, getCookies, deleteCookie] = useCookie('myCookie');
const [inputValue, setInputValue] = useState('');
const handleSave = () => {
setCookie(inputValue);
};
const handleLoad = () => {
const storedValue = getCookie();
alert('Stored value: ' + storedValue);
};
const handleShowAll = () => {
const allCookies = getCookies();
console.log('All cookies:', allCookies);
};
const handleDelete = () => {
deleteCookie();
alert('Cookie deleted');
};
return (
export default CookieComponent;
`useLocalStorage
Here's an example of how to use the useLocalStorage hook in a React component.
``jsx
import React, { useState } from 'react';
import useLocalStorage from './useLocalStorage';
function LocalStorageComponent() {
// Use the custom hook
const [setItem, getItem, getItems, deleteItem] = useLocalStorage('myKey');
const [inputValue, setInputValue] = useState('');
const handleSave = () => {
setItem(inputValue);
};
const handleLoad = () => {
const storedValue = getItem();
alert('Stored value: ' + storedValue);
};
const handleShowAll = () => {
const allItems = getItems();
console.log('All localStorage items:', allItems);
};
const handleDelete = () => {
deleteItem();
alert('Item deleted');
};
return (
export default LocalStorageComponent;