@colidy/hooks

@colidy/hooks

This library provides a collection of custom React hooks to simplify various tasks, including form management, state management, and other utilities. Each hook is designed to be reusable and easy to integrate into your React projects.

Table of Contents

1. Introduction
2. Hooks
   • useForm
   • usePrevious
   • useToggle
   • useInterval
   • useLocalStorage
   • useFetch
   • useDebounce
   • useOnClickOutside
   • useHover
   • useOnlineStatus
   • useDocumentTitle
   • useScrollPosition
   • useTimeout
   • useDarkMode
   • useKeyPress
   • useFocus
3. Contributing
4. License

Introduction

This library contains a set of custom React hooks that are useful for various aspects of React development. These hooks provide reusable logic for managing state, handling forms, and more.

Hooks

1. useForm

A custom hook for managing form state, validation, and submission. Allows you to handle form values, errors, and submission with ease.

Usage:

import { useForm } from '@colidy/hooks/useForm';

const MyForm: React.FC = () => {
  const initialValues = { username: '', email: '', password: '' };

  const validate = {
    username: (value: string) => {
      if (!value) throw new Error('Username is required');
    },
    email: (value: string) => {
      if (!value) throw new Error('Email is required');
      if (!/\S+@\S+\.\S+/.test(value)) throw new Error('Email is invalid');
    },
    password: (value: string) => {
      if (!value) throw new Error('Password is required');
      if (value.length < 6) throw new Error('Password must be at least 6 characters');
    }
  };

  const { values, errors, handleChange, handleSubmit, resetForm } = useForm({
    initialValues,
    validate,
  });

  const onSubmit = () => {
    console.log(values);
    resetForm(); // Reset form after submission
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="username" value={values.username} onChange={handleChange} />
      {errors.username && <p>{errors.username}</p>}
      <input name="email" value={values.email} onChange={handleChange} />
      {errors.email && <p>{errors.email}</p>}
      <input name="password" type="password" value={values.password} onChange={handleChange} />
      {errors.password && <p>{errors.password}</p>}
      <button type="submit">Submit</button>
    </form>
  );
};

2. usePrevious

A hook to store the previous value of a state or prop.

Usage:

import { usePrevious } from '@colidy/hooks/usePrevious';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);
  const previousCount = usePrevious(count);

  return (
    <div>
      <p>Current count: {count}</p>
      <p>Previous count: {previousCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

3. useToggle

A hook to toggle between true and false.

Usage:

import { useToggle } from '@colidy/hooks/useToggle';

const ToggleComponent: React.FC = () => {
  const [isToggled, toggle] = useToggle();

  return (
    <div>
      <p>{isToggled ? 'On' : 'Off'}</p>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
};

4. useInterval

A hook to manage intervals.

Usage:

import { useInterval } from '@colidy/hooks/useInterval';

const IntervalComponent: React.FC = () => {
  useInterval(() => {
    console.log('Interval triggered');
  }, 1000);

  return <div>Check console for interval logs every second.</div>;
};

5. useLocalStorage

A hook to manage state synced with localStorage.

Usage:

import { useLocalStorage } from '@colidy/hooks/useLocalStorage';

const LocalStorageComponent: React.FC = () => {
  const [value, setValue] = useLocalStorage('myKey', 'defaultValue');

  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={() => setValue('New Value')}>Update Value</button>
    </div>
  );
};

6. useFetch

A hook to fetch data with loading and error states.

Usage:

import { useFetch } from '@colidy/hooks/useFetch';

const FetchComponent: React.FC = () => {
  const { data, loading, error } = useFetch('https://api.example.com/data');

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <div>Data: {JSON.stringify(data)}</div>;
};

7. useDebounce

A hook to debounce a value over a specified delay.

Usage:

import { useDebounce } from '@colidy/hooks/useDebounce';

const DebounceComponent: React.FC = () => {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, 500);

  return (
    <div>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <p>Debounced Value: {debouncedValue}</p>
    </div>
  );
};

8. useOnClickOutside

A hook to handle clicks outside of a specified element.

Usage:

import { useOnClickOutside } from '@colidy/hooks/useOnClickOutside';

const ClickOutsideComponent: React.FC = () => {
  const ref = useRef<HTMLDivElement>(null);

  useOnClickOutside(ref, () => {
    console.log('Clicked outside the component');
  });

  return <div ref={ref}>Click outside of this box to trigger an action.</div>;
};

9. useHover

A hook to detect hover state.

Usage:

import { useHover } from '@colidy/hooks/useHover';

const HoverComponent: React.FC = () => {
  const [hoverRef, isHovered] = useHover();

  return (
    <div ref={hoverRef} style={{ backgroundColor: isHovered ? 'lightblue' : 'lightgray' }}>
      Hover over me!
    </div>
  );
};

10. useOnlineStatus

A hook to track online/offline status.

Usage:

import { useOnlineStatus } from '@colidy/hooks/useOnlineStatus';

const OnlineStatusComponent: React.FC = () => {
  const isOnline = useOnlineStatus();

  return <p>{isOnline ? 'Online' : 'Offline'}</p>;
};

11. useDocumentTitle

A hook to manage the document title with an update function.

Usage:

import { useDocumentTitle } from '@colidy/hooks/useDocumentTitle';

const DocumentTitleComponent: React.FC = () => {
  const { title, updateTitle } = useDocumentTitle('Initial Title');

  return (
    <div>
      <p>Current Title: {title}</p>
      <button onClick={() => updateTitle('New Title')}>Update Title</button>
    </div>
  );
};

12. useScrollPosition

A hook to track the scroll position of the window.

Usage:

import { useScrollPosition } from '@colidy/hooks/useScrollPosition';

const ScrollPositionComponent: React.FC = () => {
  const scrollY = useScrollPosition();

  return <p>Scroll Position: {scrollY}px</p>;
};

13. useTimeout

A hook to handle timeouts.

Usage:

import { useTimeout } from '@colidy/hooks/useTimeout';

const TimeoutComponent: React.FC = () => {
  useTimeout(() => {
    console.log('Timeout completed');
  }, 3000);

  return <p>Check console after 3 seconds for timeout message.</p>;
};

14. useDarkMode

A hook to detect dark mode preference.

Usage:

import { useDarkMode } from '@colidy/hooks/useDarkMode';

const DarkModeComponent: React.FC = () => {
  const isDarkMode = useDarkMode();

  return <p>{isDarkMode ? 'Dark Mode' : 'Light Mode'}</p>;
};

15. useKeyPress

A

hook to detect key presses.

Usage:

import { useKeyPress } from '@colidy/hooks/useKeyPress';

const KeyPressComponent: React.FC = () => {
  const isEnterPressed = useKeyPress('Enter');

  return <p>{isEnterPressed ? 'Enter key pressed' : 'Press the Enter key'}</p>;
};

16. useFocus

A hook to programmatically set focus on an element.

Usage:

import { useFocus } from '@colidy/hooks/useFocus';

const FocusComponent: React.FC = () => {
  const [inputRef, setFocus] = useFocus<HTMLInputElement>();

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={setFocus}>Focus the input</button>
    </div>
  );
};

Contributing

If you have suggestions or improvements for these hooks, please feel free to contribute by opening an issue or a pull request. Contributions are welcome!

License

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