use-encrypt-storage

use-encrypt-storage is a simple and secure react hook for managing browser localStorage with encryption. It provides a React hook that seamlessly integrates with the brower's localStorage and leverages the robust encryption capabilities of crypto-js. This package ensures that sensitive information stored in localStorage with encryption, adding an extra layer of protection to your application's data.

Roadmap

• Installation

• Examples

• Environment Variables

• Tech Stack

• Features

• Feedback

• Authors

Documentation

Documentation

Installation

Install with npm

  npm install use-encrypt-storage

or :

Install with yarn

  yarn add use-encrypt-storage

Examples

Use with Vite ( in main.js )

import App from './App';
import { EncryptProvider } from "use-encrypt-storage";
...

function App() {
  return (
    <EncryptProvider secretKey={import.env.meta.VITE_SECRET_KEY}>
      <App />
    </EncryptProvider>
  );
}

Use with CRA ( in index.js )

import App from './App';
import { EncryptProvider } from "use-encrypt-storage";
...

function App() {
  return (
    <EncryptProvider secretKey={process.env.REACT_APP_SECRET_KEY}>
      <App />
    </EncryptProvider>
  );
}

Use with both

Set Data

import { useCallback } from "react";
import { useEncryptStorage } from "use-encrypt-storage";
...

function App() {
  const { set } = useEncryptStorage();

  // set( key: string , value: string , expireTime?: number | undefinded )
  // expireTime is in minutes

  const onSetHandler = useCallback(() => {
    set("name", "Ma Ma Thwe");
  }, []);


  return (
      <button onClick={onSetHandler}>
        Set Name
      </button>
  );
}

Get Data

import { useCallback } from "react";
import { useEncryptStorage } from "use-encrypt-storage";
...

function App() {
  const { get } = useEncryptStorage();

  // get( key: string )

  const onGetHandler = useCallback(() => {
    const name = get("name");

    console.log(name); // Ma Ma Thwe
  }, []);


  return (
      <button onClick={onGetHandler}>
        Get Name
      </button>
  );
}

Remove Data

import { useCallback } from "react";
import { useEncryptStorage } from "use-encrypt-storage";
...

function App() {
  const { remove } = useEncryptStorage();

  // remove( key: string )

  const onRemoveHandler = useCallback(() => {
    remove("name");
  }, []);


  return (
      <button onClick={onRemoveHandler}>
        Remove Name
      </button>
  );
}

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

# For Vite
VITE_SECRET_KEY="mamakochittel"

# For CRA
REACT_APP_SECRET_KEY="mamakochittel"

Tech Stack

Client: React, crypto-js

Features

• set data in browser's localStorage with encrypted value
• get data from browser's localStorage
• remove data from browser's localStorage

Feedback

If you have any feedback, please reach out to me at [email protected]

Authors

• Denny Kate

License

MIT