oceandev-hooks

A collection of custom React hooks.

Installation

``sh
npm install oceandev-hooks
`


Example of Usage

useScrollPosition:

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 (


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;
`


useCookie

`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;