Experience the power of a dynamic JavaScript class that not only elegantly updates selected element values, but also intelligently recalls previous states.
For usage all you need to do is write your updatable varaible enclosed within {{var}}
<div id="updatable">
<p>My name is {{name}}</p>
</div>
const app = new DynamicJS("#updatable", {
name: "?",
})
element
: A valid css selector for selecting elementsobject
: State Objectmount
: Function , runs when initialized as well as on every update stateunmount
: Function , runs after updating state ( Cleanup )
Add event listeners in mount function and remove event listeners on unmount
Inorder to update state of object you need to call this function with new object with some updated values. In order to access the previous values pass a function whose 1st param is object with previous values.
Example :
const app = new DynamicJS("..." , {
name : "?" ,
age: 0
});
// Updating only one var
app.updateState({
name : "superman"
})
// Updating multiple var
app.updateState({
name : "superman",
age:1
})
// Updating with accessing previous values
app.updateState((prev) => {
return {
name : "superman",
age: ++prev.age
}
})
Email : ssanmeet123@gmail.com