react-state-local-storage
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    react-state-local-storage

    A React TS hook that handles persistence in LocalStorage, returning a state you can use to perform component rendering.

    Installation

    You can install it with:

    npm install react-state-local-storage
    
    // or
    
    yarn add react-state-local-storage
    

    Import

    import { useLocalStorage } from 'react-state-local-storage';

    Usage

    useLocalStorage(config: useLocalStorageConfig)

    const storageData = useLocalStorage({
        baseName: "@yourAppName",
        initialData: {
            //...props
        }
    });

    Providing a type:

    interface UserInterface {
        name: string;
        lastaName: string;
        age: string;
    }
    
    interface ParentsInterface {
        motherName: string;
        fatherName: string;
    }
    
    interface LocalStorageInterface {
        user: UserInterface;
        parents: ParentsInterface;
    }
    
    // {...}
    
    const storageData = useLocalStorage<LocalStorageInterface>({
        baseName: "@yourAppName",
        initialData: {
            // LocalStorageInterface props
        }
    });

    Now, storageData has:

    • data: T | null: The data stored with baseName as key base name, with provided type or any. This is a state, so you can manager component rendering whenever it changes. This will be null if LocalStorage is clear;

    • setData(data: T | null): void: The function that storing each prop of data param as a LocalStorage item with baseName as key base name.

    • setItem<I>(key: string, item: I): void: The function that storing item param inside the LocalStorage data with baseName as the key base name. The key param must be exactly the name of property you want to store;

    • removeItem(key: string): void: The function that removing a item stored inside the LocalStorage data with baseName as the key base name. The key param must be exactly the name of property you want to remove;

    • clearStorage(): void: The function that CLEANS ALL (KEEP IN MIND) your application's LocalStorage.

    Examples

    storageData.setData(data: T | null)

    const user: {
        name: "Iam",
        lastName: "Costa",
        age: "24"
    }
    
    const parents: {
        motherName: "Francisca",
        fatherName: "Antônio",
    }
    
    storageData.setData({user, parents});
    /* 
    storageData.data.user = { name: "Iam", lastName: "Costa", age: "24" },
    storageData.data.parents = {motherName: "Francisca", fatherName: "Antônio"}
    */

    storageData.setItem<I>(key: string, item: I)

    const user: {
        name: "Iam",
        lastName: "Costa",
        age: "24"
    }
    
    storageData.setItem<UserInterface>("user", user);
    // storageData.data.user = { name: "Iam", lastName: "Costa", age: "24" }

    storageData.removeItem(key: string)

    storageData.removeItem("user");
    // storageData.data.user = null

    storageData.clearStorage()

    storageData.clearStorage();
    // storageData.data = null
    /* any other key previously provided will return null because 
    all of your app's localStorage has been cleared, so be careful */

    Another way...

    There are another hook you can use. The first version of this package with some limitations. Here a example:

    import { useLocalStoragePrototype } from 'react-state-local-storage'
    
    // {...}
    
    // This handles storage only in the provided key
    const storageItem = useLocalStoragePrototype("@app/key");
    
    const user: {
        name: "Iam",
        lastName: "Costa",
        age: "24"
    }
    
    // given functions
    storageItem.setItem(user);
    storageItem.removeItem();
    storageItem.clearStorage();

    Note: In this case, although the clearStorage function clears the entire LocalStorage, it only returns the state (null value) of the given key, since one object of useLocalStoragePrototype handles only about it own key data.

    Take a look

    Clone repository below:

    git clone https://github.com/iamcosta/react-custom-local-storage-hook.git
    

    Install dependecies:

    npm install
    
    // or 
    
    yarn
    

    Run:

    npm run start
    
    // or 
    
    yarn start
    

    Open http://localhost:3000 to view it in the browser.

    Send me feedback

    This is my first package and I'm trying to put all my love on it <3

    License

    MIT @ Iam Barroso da Costa

    Install

    npm i react-state-local-storage

    DownloadsWeekly Downloads

    3

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    11.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • iamcosta