Skip to main content

useLocalStorage

Importing useLocalStorage Hook​

import { useLocalStorage } from '@ciceksepeti/cui-hooks';

Example​

caution

Users have to use setValue and remove functions inside the useEffect hook.

Otherwise ' Too many re-renders. React limits the number of renders to prevent an infinite loop. ' error will be inevitable.

import React, { useEffect } from 'react';
import { useLocalStorage } from '@ciceksepeti/cui-hooks';

export const Example = () => {
  const { value, setValue, remove } = useLocalStorage('city', 'Δ°stanbul');

  useEffect(() => {
    // SetValue() function takes only one argument and it changes value of given key property
    setValue('Antalya');

    // remove() function removes given key-value pair from LocalStorage
    // remove();
  }, [value]);

  return (
    <p>
      The value that returns from Local Storage is <b>{value}</b>
    </p>
  );
};

Preview​

PREVIEW
useLocalStorage

The value that returns from Local Storage is