I'm excited to share a lightweight library I developed for managing global state and reactive effects in JavaScript applications!
Client Hook JS is designed to simplify state management and handle side effects in your projects. It’s similar to React hooks but operates with a global scope, making it a versatile tool for various applications.
👉 Key Features
- Global State Management: Define and manage state variables with ease.
- Reactive Effects: Register and handle side effects based on state changes.
- Automatic HTML Updates: Seamlessly bind HTML elements to global state.
Uses
1. useState
useState(name, value)
Creates a global state variable with a specified name and initial value. Allows retrieval and updating of the state from anywhere in your code.
2. useEffect
useEffect(callback, variables)
Registers a callback function to be executed whenever any of the specified state variables change. The callback is called immediately with the current values of these variables and is triggered on subsequent updates.
3. Automatic HTML Updates
If you declare the client-hook attribute on an HTML element, such as:
<h1 client-hook="count"></h1>
When the value of the count state variable changes, the <h1> tag will automatically update to reflect the new value of count. This provides a simple way to bind HTML elements to global state without needing additional code to manually update the DOM.
Check it out and start coding with Client Hook JS! 🚀
GitHub Repo: https://github.com/cttricks/client-hooks-js
👋 hey, I created this library primarily for my own learning and personal projects. If you’re looking for a simple and effective way to manage state and effects in your JavaScript apps, give it a try!
Feel free to explore, use, and modify it according to your needs. I welcome any feedback, contributions, or suggestions. Let’s make it even better together! 💪
Top comments (0)