Initial commit of unreleased react-use-value-change

Author: dustinest

README.md

@@ -4,3 +4,4 @@ Check:
 - [typescript-async-timeouts](typescript-async-timeouts/README.md)
 - [typescript-blocking-queue](typescript-blocking-queue/README.md)
 - [typescript-nullsafe](typescript-nullsafe/README.md)
+- [react-use-value-change](react-use-value-change/README.md)

react-use-value-change/.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

react-use-value-change/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Margus Rebane
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

react-use-value-change/README.md

@@ -0,0 +1,60 @@
+# Install
+
+```
+$ npm install react-use-value-change --save
+```
+or
+```
+$ yarn add react-use-value-change
+```
+
+[Direct link to npmjs.com](https://www.npmjs.com/package/react-use-value-change)
+
+# The problem
+
+Quite often I find myself having complex useEffect to detect the state changes. This library helps to keep up state tracking.
+
+It contains Three simplified methods:
+
+- `useStringValueChange`
+- `useNumberValueChange`
+- `useBooleanValueChange`
+
+## Simple setup
+
+```typescript
+const [currentValue, {setValue, resetValue, resetToCurrentValue, resetToOriginalValue}, {equals, original}] = useStringValueChange("the initial value");
+```
+- `currentValue` is the string current value
+- `original` is immutable original value (until value is reset)
+- `equals` indicates if `original === currentValue`
+- `setValue("new value")` will change the `currentValue`, keeps `original` and `equals` is false if the new value is different form original
+- `resetValue()` will reset `original` to `currentValue` and `equals` to true
+- `resetValue("something else")` will reset `currentValue` and `original` to "something else"  and `equals` to true
+- `resetToCurrentValue()` will reset  the `original` to `currentValue` and `equals` to true
+- `resetToOriginalValue()` will reset the `currentValue` to `original` and `equals` to true
+
+All the other methods follows the same pattern.
+
+## Using react input
+
+The difference are with input listeners
+
+- `useStringInputValueChange` accepts `HTMLTextAreaElement | HTMLInputElement`
+- `useNumberInputValueChange` accepts `HTMLInputElement (input type number)`
+- `useBooleanInputValueChange` accepts `HTMLInputElement (checkbox or radio)`
+
+Those accept `HTMLTextAreaElement | HTMLInputElement` as setters. Which means one has to call
+
+`setValue(value: HTMLInputElement)` instead of `setValue(value: string)` (or boolean or number)
+
+## a bit more...
+
+There is also an umbrella method for more complex logic: `useValueChange`, which has to be approached carefully as it might trigger recursive rendering.
+
+See [useValueChange.test.ts](https://github.com/dustinest/typescript-async-utils/tree/main/react-usevalue/src/lib/useValueChange.test.ts) how to use it.
+
+
+## Might be a bug, but it is not
+
+When is used the initial value is immutable. One has to use the React `useffect` to reset the value.