[ADD] useStateHistoryGetter

Author: root

apps/react-tools-demo/src/App.css

@@ -328,6 +328,7 @@ blockquote>ul>li>strong {
 	.features-container {
 		grid-template-columns: repeat(1, 1fr);
 	}
+}
 
 @media screen and (max-width: 1190px) {
 	.open-nav {

apps/react-tools-demo/src/components/hooks/useStateHistoryGetter/useStateHistoryGetter.md

@@ -0,0 +1,3 @@
+The implementation is like that useStateHistory, adding useStateGetter getter function.
+
+Please visit [useStateHistory](/useStateHistory) and [useStateGetter](/useStateGetter) examples to see how it works.

apps/react-tools-demo/src/constants/components.ts

@@ -3,6 +3,7 @@ export const COMPONENTS = [
 		"usePrevious",
 		"useStateGetter",
 		"useStateHistory",
+		"useStateHistoryGetter",
 		"useMemoCompare",
 		"useMemoDeepCompare",
 		"useCallbackCompare",

apps/react-tools-demo/src/markdown/useStateHistoryGetter.md

@@ -0,0 +1,27 @@
+# useStateHistoryGetter
+Custom useState with getter state function and that tracks and allows to use previous values.
+
+## Usage
+
+The implementation is like that useStateHistory, adding useStateGetter getter function.
+
+Please visit [useStateHistory](/useStateHistory) and [useStateGetter](/useStateGetter) examples to see how it works.
+
+## API
+
+```tsx
+useStateHistoryGetter <T>(initialState: T | (() => T), capacity: number | "no-limit" = "no-limit"): [T, Dispatch<SetStateAction<T>>, () => T, ReturnType<typeof useStateHistory<T>>[2]] 
+```
+
+> ### Params
+>
+> - __initialState__: _T | () => T_  
+value or a function.
+> - __capacity="no-limit"__: _number | "no-limit"_  
+history capacity (default 'no-limit').
+>
+
+> ### Returns
+>
+> - __array__: _[T, Dispatch<SetStateAction<T>>, getter: () => T, history: {history: readonly T[], presentPointer: number, trackUpdate: (enable:boolean) => void, canUndo: boolean, canRedo: boolean, undo: () => void, redo: () => void, go: (index: number) => void, clear: (value?: T) => void}]_
+>

apps/react-tools-demo/src/router/Router.tsx

@@ -6,6 +6,7 @@ import HomeWrapper from '../components/home/HomeWrapper';
 import usePreviousMD from '../markdown/UsePrevious.md?url';
 import useStateGetterMD from '../markdown/UseStateGetter.md?url';
 import useStateHistoryMD from '../markdown/UseStateHistory.md?url';
+import useStateHistoryGetterMD from '../markdown/useStateHistoryGetter.md?url';
 import useCallbackCompareMD from '../markdown/UseCallbackCompare.md?url';
 import useCallbackDeepCompareMD from '../markdown/UseCallbackDeepCompare.md?url';
 import useMemoCompareMD from '../markdown/UseMemoCompare.md?url';
@@ -59,6 +60,12 @@ function Router() {
 						markdown={useStateHistoryMD}
 					/>
 				},
+				{
+					path: "/useStateHistoryGetter",
+					element: <MarkdownLayout
+						source={useStateHistoryGetterMD}
+					/>
+				},
 				{
 					path: "/useCallbackCompare",
 					element: <ComponentLayout

packages/react-tools/README.md

@@ -1,10 +1,10 @@
 # TODO
 - __STATE__
 	- [x] usePrevious
-	- [-] useStateGetter
+	- [x] useStateGetter
 	- [ ] useStateRestore
 	- [x] useStateHistory
-	- [-] useStateHistoryGetter
+	- [x] useStateHistoryGetter
 	- [ ] useReducerHistory
 	- [ ] useReducerGetter
 	- [ ] useReducerRestore