UNPKG

linkedstate

Version:

Context alternative for react. Link multiple states within components using a unique key, and set them/update them globally.

43 lines (23 loc) 1.57 kB
# linkedState **Alternative** to react context, for when you feel like something simpler, lighter and quick to use. Use linkedState with a **unique, but shared key** to have as many components as you want share the same state anywhere in the tree, without a higher order component or context. **Objects** stored in the linked state are quickly deep compared and updated only when necessary. **Promises** are auto resolved before applying to your components. ## How to Use To use linked state in a component, replace **useState** with **useLinkedState**. The **first** argument must be a **shared, unique key** for all the components you want to share this state. The **second** argument is an optional **initial value** that will apply to the linked state if it hasn't already been set. ```javascript //For an already existing value const [demoValue, setDemoValue] = useLinkedState("unique/key.with/any.value"); //For a value with an optional initial value const [demoValue, setDemoValue] = useLinkedState("unique/key.with/any.value", { someKey: "new value" }); ``` To get/set values outside components, it is just as easy. Use the **linkedState.set** and **linkedState.get** utility functions. ```javascript //Sets the value of key 'unique/key.with/any.value' to "new value" linkedState.set("unique/key.with/any.value", "new value"); //Gets the value of key 'unique/key.with/any.value' linkedState.get("unique/key.with/any.value"); ``` That's it. Super simple and easy. Works across different vdom trees, portals, and pretty much anywhere.