QOL Hooks


Description

(Qaulity of Life)

QOL Hooks is a collection of useful hooks for enhancing the quality of life in your React applications. These hooks provide common functionalities that can be easily integrated into your projects.

Installation

To initialize QOL Hooks, run:

``bash
npx qol-hooks init
`

Then install whatever hooks you need:

`bash
npx qol-hooks install useClipboard
`

Or just install all of them:

`bash
npx qol-hooks install all
`

Available Hooks

- useClipboard
- useDebounce
- useEventListener
- useFetch
- useHover
- useInterval
- useInView
- useKeyPress
- useLocalStorage
- useOnClickOutside
- useOnlineStatus
- usePrevious
- useScroll
- useSessionStorage
- useTimeout
- useToggle
- useWindowSize

useClipboard

A hook that allows you to copy text to the clipboard.

$3

`jsx
import { useClipboard } from "qol-hooks";

const Component = () => {
const [copied, copy] = useClipboard();

return (



);
};
`

useDebounce

A hook that debounces a value.

$3

`jsx
import { useDebounce } from "qol-hooks";

const Component = () => {
const [value, setValue] = useState("");
const debouncedValue = useDebounce(value, 500);

return (



);
};
`

useEventListener

A hook that allows you to add event listeners to the document.

$3

`jsx
import { useEventListener } from "qol-hooks";

const Component = () => {
useEventListener("click", () => {
console.log("Document clicked!");
});

return

;
};
`

useFetch

A hook that fetches data from an API.

$3

`jsx
import { useFetch } from "qol-hooks";

const Component = () => {
const [data, loading, error] = useFetch(
"https://jsonplaceholder.typicode.com/posts",
{
method: "GET",
}
);

if (loading) return

Loading...

;
if (error) return

Error: {error.message}

;

return (

{data.map((post) => (

• {post.title}

))}

);
};
`

useHover

A hook that detects whether an element is being hovered over.

$3

`jsx
import { useHover } from "qol-hooks";

const Component = () => {
const [hoverRef, isHovered] = useHover();

return

;
};
`

useInterval

A hook that sets an interval.

$3

`jsx
import { useInterval } from "qol-hooks";

const Component = () => {
useInterval(() => {
console.log("Interval triggered!");
}, 1000);

return

;
};
`

useInView

A hook that detects whether an element is in view.

$3

`jsx
import { useInView } from "qol-hooks";

const Component = () => {
const [ref, inView] = useInView();

return (



);
};
`

useKeyPress

A hook that detects key presses.

$3

`jsx
import { useKeyPress } from "qol-hooks";

const Component = () => {
const pressed = useKeyPress("a");

return

;
};
`

useLocalStorage

A hook that allows you to store data in local storage.

$3

`jsx
import { useLocalStorage } from "qol-hooks";

const Component = () => {
const [name, setName] = useLocalStorage("name", "");

return (



);
};
`

useOnClickOutside

A hook that detects clicks outside of an element.

$3

`jsx
import { useOnClickOutside } from "qol-hooks";

const Component = () => {
const ref = useRef();
useOnClickOutside(ref, () => {
console.log("Clicked outside!");
});

return

;
};
`

useOnlineStatus

A hook that detects the online status of the user.

$3

`jsx
import { useOnlineStatus } from "qol-hooks";

const Component = () => {
const online = useOnlineStatus();

return

;
};
`

usePrevious

A hook that returns the previous value of a state.

$3

`jsx
import { usePrevious } from "qol-hooks";

const Component = () => {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count);

return (



);
};
`

useScroll

A hook that detects the scroll position of the window.

$3

`jsx
import { useScroll } from "qol-hooks";

const Component = () => {
const { x, y } = useScroll();

return (



);
};
`

useSessionStorage

A hook that allows you to store data in session storage.

$3

`jsx
import { useSessionStorage } from "qol-hooks";

const Component = () => {
const [name, setName] = useSessionStorage("name", "");

return (



);
};
`

useTimeout

A hook that sets a timeout.

$3

`jsx
import { useTimeout } from "qol-hooks";

const Component = () => {
const [visible, setVisible] = useState(false);
useTimeout(() => setVisible(true), 1000);

return

;
};
`

useToggle

A hook that toggles between two states.

$3

`jsx
import { useToggle } from "qol-hooks";

const Component = () => {
const [isOn, toggle] = useToggle(false);

return (



);
};
`

useWindowSize

A hook that detects the window size.

$3

`jsx
import { useWindowSize } from "qol-hooks";

const Component = () => {
const { width, height } = useWindowSize();

return (



);
};
``

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.