useDbState
is a custom React hook that allows you to persist state in IndexedDB. It provides an easy-to-use Hook similar to useState
, but with the added benefit of persistent storage. It uses IndexedDB to store and retrieve state, ensuring that it is always available even after the user closes the browser tab or device.
npm install use-db-state
import { useDbState, useDbKeyRemover } from 'use-db-state';
function ComponentOne() {
const [myValue, setMyValue] = useDbState('myValue', '');
const removeMyKey = useDbKeyRemover();
const handleChange = (e) => {
setMyValue(e.target.value);
};
return (
<div className="App">
<h1>My App</h1>
<div>
<input type='text' value={myValue} onChange={handleChange} />
<button onClick={() => removeMyKey('myValue')}>Remove myValue</button>
</div>
</div>
);
}
export default ComponentOne;
import { useDbState, useDbKeyRemover } from 'use-db-state';
function ComponentTwo() {
const [myValue, setMyValue] = useDbState('myValue'); // You now have access to the myValue state from ComponentOne
return (
<div className="App">
<h1>My App</h1>
<div>
<p>myValue: {myValue}</p>
</div>
</div>
);
}
export default ComponentTwo;
In this example, useDbState
is used to create a state variable myValue
with a setter setMyValue
. The initial value of myValue
is an empty string. The state is persisted in IndexedDB, so it will be preserved across page reloads. The useDbKeyRemover hook is used to remove the key myValue
from the IndexedDB object store when the component unmounts.
when useDbState is used with the same key myValue
in another component, it will be able to access the same state value.
Parameters
-
key
(string): The key under which the value is stored in IndexedDB. -
defaultValue
(any): The default value if no value is found in IndexedDB. -
dbName
(string, optional): The name of the IndexedDB database. Defaults to 'userDatabase'. -
storeName
(string, optional): The name of the IndexedDB object store. Defaults to 'userData'.
useDbState
returns an array with two elements:
- The current state value.
- A setter function to update the state. This function has the same API as the setter returned by
useState
.
useDbKeyRemover
takes two arguments:
-
dbName
(optional): The name of the IndexedDB database. If not provided, defaults to'userDatabase'
. -
storeName
(optional): The name of the object store within the database. If not provided, defaults to'userData'
.
useDbKeyRemover
returns a function that removes the given key from the IndexedDB object store.
-
key
(required): The key to remove from the IndexedDB object store using the returned function.
import { useDbState, useDbKeyRemover } from 'use-db-state';
function App() {
const [myValue, setMyValue] = useDbState('myValue', '', 'myCustomDatabase', 'myCustomStore');
const removeMyKey = useDbKeyRemover('myCustomDatabase', 'myCustomStore');
return (
<div className="App">
<h1>My App</h1>
<div>
<input type='text' value={myValue} onChange={e => setMyValue(e.target.value)} />
<button onClick={() => removeMyKey('myValue')}>Remove myValue</button>
</div>
</div>
);
}
export default App;
In this example, useDbState
is used to create a state variable myValue
with a setter setMyValue
. The initial value of myValue
is an empty string. The state is persisted in a custom IndexedDB database named 'myCustomDatabase'
, and within that database, it’s stored in an object store named 'myCustomStore'
. The state will be preserved across page reloads.
Use useDbState
when you need to persist state across page reloads. It’s particularly useful for things like user preferences or form data that you want to preserve if the user accidentally refreshes or navigates away from the page.
useDbState
uses IndexedDB for data persistence, which has several advantages over localStorage:
- Larger Storage Capacity: IndexedDB can store large amounts of data, ranging from a few megabytes to gigabytes. In contrast, localStorage usually has a storage limit of around 5-10MB per domain.
- Complex Data Queries: IndexedDB supports advanced queries using indexes. localStorage, on the other hand, only supports key-value pairs and does not have built-in support for indexing or complex queries
- Asynchronous Operations: IndexedDB operations are asynchronous, preventing blocking of the main thread.
- Structured Data: IndexedDB can store complex structured data like objects and arrays. localStorage only supports strings.
- Durability: Data in IndexedDB persists even when the browser is closed, or the system crashes.
- Scalability: IndexedDB scales well with large datasets.
These advantages make useDbState
a powerful tool for managing state in your React applications.
useDbState
uses IndexedDB
for storage, which is asynchronous and has certain limitations. It’s not suitable for storing very large amounts of data in a single state variable, and complex data structures like Map or Set may need to be serialized before storage.
Contributions are welcome! Please open an issue or submit a pull request on the GitHub repository.
This project is licensed under the MIT license