persist-pro v0.1.36

⭐️ Persist - Pro

Persist Pro: Uma biblioteca avançada para gerenciamento otimizado de localStorage. Facilita a persistência de dados no navegador, oferecendo uma interface simples e robusta para armazenamento e recuperação de dados, incluindo suporte a objetos e arrays. Ideal para projetos que necessitam de armazenamento local confiável e eficiente.

💻 Demo

🔗Persist Pro Demo

⚙️ Uso com React/Next.js

📦 Instalação

• Usando npm:

npm install persist-pro

• Usando yarn:

yarn add persist-pro

Para utilizar o useLocalStorage no seu projeto, comece importando o hook e, em seguida, desestruture as propriedades retornadas para gerenciar facilmente os dados no localStorage.

import { useLocalStorage } from 'persist-pro';

O hook useLocalStorage retorna um array com cinco elementos, que você pode desestruturar da seguinte forma:

const [value, setValue, pushToStoredArray, removeValue, removeToArrayById] = useLocalStorage('key', 'initialValue');

Props useLocalStorage:

Exemplo de Usoa (valor simples):

No exemplo a seguir, o hook é usado para gerenciar um nome de usuário:

function MyComponent() {
  // Initializing the hook with the key 'user' and the initial value 'Visitor'
  const [userName, setUserName, pushToStoredArray, removeUserName, removeToArrayById] = useLocalStorage('userName', 'Visitor');

// Another way of writing // const useName, setUserName, , removeUserName = useLocalStorage('userName', 'Visitor'); // You can use the comma to skip and ignore an element in the array that you do not want to use.

// Example of how to update the value const changeName = () => { setUserName('Alice'); };

// Example of how to remove the key from localStorage const clearName = () => { removeUserName(); };

return (

<div>
  <p>User Name: {userName}</p>
  <button onClick={changeName}>Change Name to Alice</button>
  <button onClick={clearName}>Clear User Name</button>
</div>

); }

Neste exemplo, MyComponent utiliza o hook useLocalStorage para gerenciar o nome do usuário armazenado no localStorage. As funções changeName e clearName são usadas para atualizar e remover o nome do usuário, respectivamente.

### Exemplo de Uso (array):
> No exemplo a seguir, o hook é usado para gerenciar um array de frutas:
```jsx
function MyComponent() {
  const initialFruits = [{ id: 1, name: 'banana' }, { id: 2, name: 'maçã' }, { id: 3, name: 'laranja' }];
  const newFruits = [{ id: 1, name: 'melancia' }, { id: 2, name: 'goiaba' }];

  // Initializing the hook with the key 'fruits' and the initial value 'initialFruits'
  const [fruits, setFruits, pushToStoredArray, removeFruits, removeToArrayById] = useLocalStorage('fruits', initialFruits);


  // Example of how set new array
  const addFruit = () => {
    setFruits(newFruits);
  };

  // Example of how to update the value
  const addFruit = () => {
    pushToStoredArray({ id: 4, name: 'morango' });
  };

  // Example of how to remove the key from localStorage
  const clearFruits = () => {
    removeFruits();
  };

  // Example of how to remove item from array
  const handleRemoveLocalStorage = (id) => {
    removeToArrayById(id);
  }

  return (
    <div>
      {fruits.map((fruit, index) => (
         <div key={index}>
          <p>{fruit}</p>
          <button onClick={() => handleRemoveLocalStorage(fruit.id)}>Remove</button>
          <button onClick={clearFruits}>Clear fruits</button>
        </div>
      ))}
      <button onClick={addFruit}>Add fruit</button>
    </div>
  );
}

Neste exemplo, MyComponent utiliza o hook useLocalStorage para gerenciar um array de frutas armazenado no localStorage. As funções pushToStoredArray e removeToArrayById são usadas para adicionar e remover itens do array, respectivamente. A função setFruits é usada para inserir um novo array de frutas. A função clearFruits é usada para remover o array de frutas do localStorage. E a variável fruits é usada para renderizar o array de frutas na tela.

✨ Como contribuir

Para contribuir com o projeto, leia o arquivo CONTRIBUTING.md

ℹ️ Mais infos

• Persist Pro - pacote npm.

⁉️ Dúvidas, sugestões e melhorias

Se você tiver dúvidas, quiser relatar um bug ou solicitar novos recursos, por favor, abra uma issue no nosso repositório, ou conecte-se comigo no Linkedin - Vitor Nogueira

🪪 Licença

Persist Pro is MIT licensed.