Uitlity of Simple React hooks
npm install simple-react-hooks-utility  
---
`` typescript
const UserProfileForm = () => {
const [formState, updateFormState] = useFormState
// Handle input changes and update state
const handleChange = (event: React.ChangeEvent
const { name, value } = event.target;
updateFormState(name, value); // Updates a specific field
};
// Increment a counter value based on the previous state
const incrementCounter = () => {
updateFormState((prevState) => ({ count: (prevState.count || 0) + 1 }));
};
// Handle form submission
const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
console.log("Form submitted:", formState);
// Submit form logic here
};
return (
#### useDarkMode
A custom React hook to manage dark mode state using localStorage.
typescript
import { useDarkMode } from 'simple-react-hooks-utility'const DarkModeToggle = () => {
const [darkMode, setDarkMode] = useDarkMode();
const toggleDarkMode = () => setDarkMode(!darkMode);
return (
);
};
`#### useDebounce
A custom React hook to debounce a value.
This hook returns a debounced version of the input value. The debounced value will only update after a specified delay, avoiding excessive updates or API calls.
typescript
import { useDebounce } from 'simple-react-hooks-utility'const DebouncedInput = () => {
const [inputValue, setInputValue] = useState("");
const debouncedValue = useDebounce(inputValue, 500);
useEffect(() => {
// Perform an action with the debounced value (e.g., API call)
console.log(debouncedValue);
}, [debouncedValue]);
return setInputValue(e.target.value)} />;
};
`#### useFetch
A custom React hook to fetch data from a given URL.
javascript
import { useFetch } from 'simple-react-hooks-utility'const { data, error, loading, statusCode } = useFetch('https://api.myserver.com');
`#### useLocalStorage
useLocalStorage - A custom React hook to manage state with localStorage.
typescript
import { useLocalStorage } from 'simple-react-hooks-utility'const Counter = () => {
const [count, setCount] = useLocalStorage("count", 0);
const increment = () => setCount(count + 1);
return (
Count: {count}
);
};
`#### useObjectState
A custom React hook to manage state as an object.
typescript
import { useObjectState } from 'simple-react-hooks-utility'const ExampleComponent = () => {
const [state, updateState] = useObjectState<{ count: number; name: string }>({ count: 0, name: "" });
const incrementCount = () => {
updateState({ count: state.count + 1 });
};
const updateName = (name: string) => {
updateState({ name });
};
return (
Count: {state.count}
updateName(e.target.value)} />
);
};
`#### usePrevious
A custom React hook to manage query parameters in the URL.
typescript
import { useQueryParam } from 'simple-react-hooks-utility'const CounterComponent = () => {
const [count, setCount] = useState(0);
const previousCount = usePrevious(count);
return (
Current Count: {count}
Previous Count: {previousCount}
);
};
`#### useQueryParam
A custom React hook to manage query parameters in the URL.
typescript
import { useQueryParam } from 'simple-react-hooks-utility'const ExampleComponent = () => {
const [queryParam, setQueryParam] = useQueryParam("myParam");
const handleChange = (event: React.ChangeEvent) => {
setQueryParam(event.target.value);
};
return (
Current Value: {queryParam}
);
};
``