Sanmeet007 / dynamic-js

Experience the power of a dynamic JavaScript class that not only elegantly updates selected element values, but also intelligently recalls previous states

Home Page:https://sanmeet007.github.io/dynamic-js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Dynamic JS

Experience the power of a dynamic JavaScript class that not only elegantly updates selected element values, but also intelligently recalls previous states.

Quick Usage

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: "?",
})

Dynamic JS class

Parameter

  • element : A valid css selector for selecting elements
  • object : State Object
  • mount : Function , runs when initialized as well as on every update state
  • unmount : Function , runs after updating state ( Cleanup )

Add event listeners in mount function and remove event listeners on unmount

updateState Method

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
    }
})

Developer contact

Email : ssanmeet123@gmail.com

About

Experience the power of a dynamic JavaScript class that not only elegantly updates selected element values, but also intelligently recalls previous states

https://sanmeet007.github.io/dynamic-js

License:GNU General Public License v3.0


Languages

Language:JavaScript 54.6%Language:CSS 28.1%Language:HTML 17.2%