React Usefull Hooks Package

A collection of useful and reusable custom hooks for React applications. These hooks simplify common tasks and enhance your development workflow.

More Hooks are cooming soon be active with react-fu-hooks

Table of Contents

• Installation
• Usage
  • useLocalStorage
  • useCopyClipboard
  • useCountDown
• Available Hooks

Installation

To install the package, run the following command in your project directory:

npm install react-fu-hooks

Usage

useLocalStorage

Example of useLocalStorage easy way to use in your react component 👍.

import React, { useState } from 'react';
import {useLocalStorage} from 'react-fu-hooks';

const YourComponent = () => {
    const [name, setName] = useLocalStorage('myName', ''); // Initializes
    const [inputValue, setInputValue] = useState('');

    const handleChange = (e) => {
        setInputValue(e.target.value); // Update local state
    };

    const handleSave = () => {
        setName(inputValue); // Save the value to useLocalStorage
    };

    return (
        <div>
            <h1>Your Name:</h1>
            <input
                type="text"
                value={inputValue}
                onChange={handleChange}
                placeholder="Enter your name"
            />
            <button onClick={handleSave}>Save</button>
            <p>Saved Name: {name}</p>
        </div>
    );
};

export default YourComponent;

Explain

const [name, setName] = useLocalStorage('myName', ''); 

In this myName is key for save value and retrieve stored value from useLocalStorage hook second is '' (empty string) as the default and initial value.

This line initializes name by retrieving the value from localStorage using 'name' as the key. If no value is found, it uses '' (empty string) as the default and initial value. The setName function updates both the React state and the localStorage entry for 'name'.

What is useLocalStorage

In this useLocalStorage is a custom hook for saving any type of data in this like useState but one difference. useState is use for store data but when browser are reload(refresh) then reset value from useState but useLocalStorage is save data when reloading(refresh) page so this is best for saving data.

Available Hooks

| Hooks | Type of hook | Description | | :-------- | :------- | :-------------------------------- | | useLocalStorage('key', '') | store values | Required. key important for store value and get. Second parameter is for initial value if you have not initial value you can set '' (empty string) | | useCopyClipboard() | copy values | using this hook you can easily copy any value, links etc. | | useCountDown(11) | count down | Note. In this you can set any number for count down timer |

More Hooks are cooming soon be active with react-fu-hooks

useCopyClipboard

const {copied, copyToClipboard} = useClipboard();


// jsx
<p>copied: {copied && 'Copied Successfully'}</p>
<div className='btn btn-primary' onClick={()=>copyToClipboard('react fu hooks')}>Copy</div>

In this copied is a boolean when user copy anythink then this is true for 2 sec means when copied then you can show a message exmaple Copied Successfully and this message are hide automatically after 2sec.

useCountDown

  const count = useCountDown(11);


// jsx
<p>Timer: {count}</p>

This is for show a count down timer example in this set 11 then start count down from 11 to 0.

Developed By

This package are created by Future Apps Visit Our Website