useLocalStorage.md

useLocalStorage

A hook for storing values into Local Storage.

💡 Why?

• A quick way to use the localStorage in your React components.

Basic Usage:

import React, { useCallback } from 'react'; 
import { Pill, Paragraph, Icon } from 'beautiful-react-ui'; 
import { useLocalStorage } from 'beautiful-react-hooks'; 

const NotificationBadgeExample = ({ notifications }) => {
  const [notificationCount, setNotificationCount] = useLocalStorage('demo-notification-count', notifications);
  
  const clearNotifications = useCallback(() => {
    setNotificationCount(0);
  }, [notificationCount]);

  return (
    <DisplayDemo>
        <Paragraph>Click on the badge to clear from the local storage</Paragraph>
        <Pill color="primary" onClick={clearNotifications}>
          <Icon name="envelope" />
          You've got {notificationCount} new messages
        </Pill>
    </DisplayDemo>
  )
};

<NotificationBadgeExample notifications={100}/>

Mastering the hooks

✅ When to use

• When you need to get/set values from and to the localStorage

🛑 When not to use

• Do not use this hook as a state manager, the localStorage is meant to be used for small pieces of data