react-hookbox v1.0.2

List of hooks

1. useLocalStorage: A hook for handling data persistence in local storage.
2. useFormValidation: A hook for managing form validation with customizable rules.
3. useMediaQuery: A hook for managing responsive design by tracking changes in the viewport size.
4. useDebounce: A hook for implementing debounce functionality to limit the rate of execution for expensive operations.
5. useThrottle: A hook for throttling the execution of a function to control how often it can be called.
6. useAnimation: A hook for managing complex animations, including keyframes and transitions.
7. useDarkMode: A hook for implementing a dark mode feature in applications.
8. useClipboard: A hook for handling copying data to the clipboard.

1. useLocalStorage

import {useLocalStorage} from 'react-hooks'

function App() {

 const [count,setCount] = useLocalStorage('count',0)

  return(
    <span>{count}</span>
    <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  )
}
export default App

2. useFormValidation

import React from "react";
import { useFormValidation } from "react-hooks";

const initialFormState = {
  name: "",
  email: "",
  available: false,
  gender: "",
  password: "",
};

const validationRules = {
  name: (value: string) => value.length > 0,
  email: (value: string) => /\S+@\S+\.\S+/.test(value),
  available: (value: boolean) => value === true,
  gender: (value: string) => value !== "",
  password: (value: string) => value.length >= 6,
};

const App = () => {
  const { formData, errors, handleChange, validateForm } = useFormValidation(
    initialFormState,
    validationRules
  );

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    console.log(formData);
    if (validateForm()) {
      // You can perform further actions here, such as submitting the form data.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name </label>
        <input
          type="text"
          placeholder="Name"
          value={formData.name}
          onChange={(e) => handleChange("name", e.target.value)}
        />
        {errors.name && <span style={{ color: "red" }}>{errors.name}</span>}
      </div>
      <div>
        <label>Available</label>
        <input
          type="checkbox"
          placeholder="Is available"
          value={formData.available}
          onChange={(e) => handleChange("available", e.target.checked)}
        />
        {errors.name && (
          <span style={{ color: "red" }}>{errors.available}</span>
        )}
      </div>

      <div>
        <label>Gender</label>
        <input
          type="radio"
          placeholder="Is available"
          value="male"
          name="gender"
          onChange={(e) => handleChange("gender", e.target.value)}
        />
        <input
          type="radio"
          placeholder="Is available"
          value="female"
          name="gender"
          onChange={(e) => handleChange("gender", e.target.value)}
        />
        {errors.name && <span style={{ color: "red" }}>{errors.gender}</span>}
      </div>
      <div>
        <label>Email</label>
        <input
          type="text"
          placeholder="Email"
          value={formData.email}
          onChange={(e) => handleChange("email", e.target.value)}
        />
        {errors.email && <span style={{ color: "red" }}>{errors.email}</span>}
      </div>
      <div>
        <label>Password</label>

        <input
          type="password"
          placeholder="Password"
          value={formData.password}
          onChange={(e) => handleChange("password", e.target.value)}
        />
        {errors.password && (
          <span style={{ color: "red" }}>{errors.password}</span>
        )}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default App;

3. useMediaQuery

import { useMediaQuery } from "react-hooks";

const App = () => {
  const isMobile = useMediaQuery("(max-width: 768px)");

  return (
    <div>
      {isMobile ? (
        <p>Currently displaying on a mobile device.</p>
      ) : (
        <p>Currently displaying on a larger screen.</p>
      )}
    </div>
  );
};

export default App;

4. useDebounce

import { useState } from "react";
import { useDebounce } from "react-hookbox";

const App = () => {
  const [inputValue, setInputValue] = useState("");
  const debouncedValue = useDebounce(inputValue, 500);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Debounced Value: {debouncedValue}</p>
    </div>
  );
};

export default App;

5. useThrottle

import { useState } from "react";
import { useThrottle } from "react-hookbox";

const App = () => {
  const [count, setCount] = useState(0);
  const throttledCount = useThrottle(count, 1000); // Throttle to 1 second

  return (
    <div>
      <h2>Throttled Counter</h2>
      <p>Actual Count: {count}</p>
      <p>Throttled Count: {throttledCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default App;

6. useAnimation

import { useRef } from "react";
import { useAnimation } from "react-hookbox";

const App = () => {
  const boxRef = useRef < HTMLDivElement > null;
  const { startAnimation, playAnimation, pauseAnimation, cancelAnimation } =
    useAnimation();

  const options = {
    keyframes: [
      { transform: "translateX(0)" },
      { transform: "translateX(200px)" },
      { transform: "translateX(0)" },
    ],
    options: {
      duration: 1000,
      iterations: Infinity,
    },
  };

  return (
    <div>
      <div
        ref={boxRef}
        style={{
          width: "100px",
          height: "100px",
          backgroundColor: "red",
        }}
      />
      <button onClick={() => startAnimation(boxRef.current, options)}>
        Start Animation
      </button>
      <button onClick={() => pauseAnimation(boxRef.current)}>
        Pause Animation
      </button>
      <button onClick={() => playAnimation(boxRef.current)}>
        Play Animation
      </button>
      <button onClick={() => cancelAnimation(boxRef.current)}>
        Cancel Animation
      </button>
    </div>
  );
};

export default App;

7. useDarkMode

import { useDarkMode } from "react-hookbox";

const App = () => {
  const [theme, setTheme] = useDarkMode("dark");

  return (
    <div>
      <h1>Current theme = {theme}</h1>
      <button onClick={() => setTheme()}>Change To light</button>
    </div>
  );
};

export default App;

8. useClipboard

import { useClipboard } from "react-hookbox";

const App = () => {
  const [setClipboard, text] = useClipboard();

  return (
    <div>
      <h1>Copied text = {text}</h1>
      <button onClick={() => setClipboard("Text to clipboard")}>
        Copy to clipboard
      </button>
    </div>
  );
};

export default App;