dphelper devtools, data management for developers by Dario Passariello
js
import { useEffect } from 'react';
import 'dphelper';
function App() {
// Store a value in the state
state.test = 'Hello, World!';
// Use the stored value in a React component
useEffect(() => {
console.log("You can recall from all pages: " + state.test); // Output: "Hello, World!"
}, []);
return (
{state.test}
);
}
export default App;
`
Install
Install dpHelper.
`shell
npm i dphelper --save-dev
`
or update:
`shell
npm i dphelper@latest --save-dev
`
Use it in the main root file (and only there):
`js
import "dphelper";
`
or
`js
require("dphelper");
`
Install for EJS or Other Types of Projects (like HTML)
Note: You don't need to use npm install in this case, or you will get an error.
`html
`
Live Demo
https://tests.a51.dev/
You can see an HTML version where dpHelper and LayerPro work together seamlessly. dpHelper is compatible with a variety of frontend libraries, including:
* HTML
* React
* Vue
* And any other frontend library
Documentation
You can see:
* State
* Store
* Observer
* useObserver
* List of functions
You can see more tutorials, information, and examples about dpHelper clicking here.
State
$3
You can use the state function to store and reuse data throughout your application. Similar to other state managers, you can save state information in JSON format and access it easily in various contexts, including React useEffect and/or dispatch.
For example, you can store a value like this: _state.test = 'I am ready'_ and then retrieve it later using state.test.
_example:_
You can use the browser's devtools console and type " state.test = 'I am ready' ". Every time you want to use 'test' values, you need just recall state.test.
`js
// Set a state
state.test = "I am ready" *
// Get the state
state.test *
// List all states
state.list // or just "state" to see the proxy
// Lock a state from edit (Only for Objects or Array)
state.test.lock() *
// Remove a state
state.remove("test")
// Remove all states
state.removeAll()
*["test" is only an example]
`
$3
Note: _Observer works only with states. Stores are excluded at the moment._
If you want to run a function every time a state changes, you can use:
`js
/**
* Observer is a non-cumulative listener,
* triggered from customEvent / dispatch from state
* @parameters
* [ state | store, function ]
*/
observer( "state.test", () => alert("Test Changes to: " + state.test) )
|__________| |___________________________________________|
State: string Function
PS: you need to use the name of state | store as string
`
You can use it everywhere. Works like "useState" in React but with more flexibility (use one observer for each state!).
$3
`js
import 'dphelper';
// Use the observer to log the changing state value
observer(
'state.count',
() => console.log("State changed: ", state.count)
);
// Store a value in the state that changes every 5 seconds
setInterval(() => state.count = Date.now(), 5000);
`
> NOTE: In some cases you need to wrap inside and useEffect in React to avoid multiple observers
#### Another Simple Example
`js
import 'dphelper';
// Set a state
state.myData = 'Hello, world!';
// Retrieve the state
console.log(state.myData); // Output: Hello, world!
// Observe state changes
observer('myData', () => {
console.log('myData has changed to:', state.myData);
});
// Change the state
state.myData = 'New value';
`
useObserver
`js
import 'dphelper';
// Use the useObserver to log the changing state value
useObserver(
() => console.log("State changed: ", state.count)
, 'state.count'
);
// Store a value in the state that changes every 5 seconds
setInterval(() => state.count = Date.now(), 5000);
`
Store
$3
When using dpHelper for permanent storage, you should use the store, which stores data persistently across sessions.
#### Important Security Note
1. Use store for persistent storage: If you want to store data permanently, use store to ensure it is saved in localStorage.
2. Remove data when necessary: To maintain security, remove stored data when it is no longer needed, such as during logout.
3. Remove all stored data: Use store.removeAll() to securely remove all stored data from your application.
`js
// Set a store:
store.set("test", { test: "test" })
// Get a store:
store.get("test") // Output: { test: "test" }
// Remove a store:
store.remove("test") // Output: "ok"
// Remove all stores:
store.removeAll() // Output: "ok"
`
$3
`js
import { useEffect } from 'react';
import 'dphelper';
function App() {
// Store a value in the store (persistent storage)
store.set(
'user',
{
name: 'John Doe',
age: 30
}
);
// Use the stored value in a React component
useEffect(
() => {
console.log(store.get("user")); // Output: { name: "John Doe", age: 30 }
$("#name").text(store.get("user").name)
}, []
);
// Remove all stored data if necessary
// store.removeAll();
return (
...
);
}
export default App;
`
session
Similar to store but it's removed when you close the browser.
For more performance it's better to use state over session. State is global and access to data is more faster and not require the time to resolve promises.
`js
// Set a store:
store.set("test", { test: "test" })
// Get a store:
store.get("test") // Output: { test: "test" }
// Remove a store:
store.remove("test") // Output: "ok"
// Remove all stores:
store.removeAll() // Output: "ok"
`
dpHelper vs Redux vs Zustand vs MobX
| Feature | dpHelper | Redux / RTK | Zustand | MobX |
|---------|--------------|------------------|-------------|----------|
| Type | Full suite (190+ utilities) + State Manager | Predictable state container | Minimal state manager | Reactive state manager |
| Boilerplate | None (single import) | High (reduced with RTK) | Low | Low |
| Global Access | Immediate global state (state.x) | No, requires provider | Yes, via store | Yes, via observable |
| Reactivity | Built‑in observer | Only via bindings | Yes | Yes (highly reactive) |
| DevTools | DevTools + Browser Extension | Redux DevTools | Yes | Yes |
| Learning Curve | Very low | Medium/High | Low | Medium |
| Action Handling | Simple actions + proxy | Actions + reducers | Setter functions | Decorators / actions |
| Persistence | Built‑in (state/store/session) | Via middleware | Via middleware | Via plugins |
| Ecosystem | 190+ built‑in utilities | Very large | Medium | Medium |
| React Usage | state.x` anywhere | Hooks + provider | Hooks | Decorators / hooks |