[FIX] various

Author: nDriaDev

README.md

@@ -171,7 +171,7 @@ Go to [Demo](https://ndriadev.github.io/react-tools) to see and try all implemen
 
 	- [_ErrorBoundary_](#ErrorBoundary)
 	- [_For_](#For)
-	- [_Lazy_](#Lazy)
+	- [_LazyComponent_](#LazyComponent)
 	- [_Show_](#Show)
 	- [_SwitchCase_](#SwitchCase)
 
@@ -992,11 +992,11 @@ Component to optimize the rendering of a list of elements without need to specif
 For = memo(<T extends unknown>({ of, children, filter, map, sort, elementKey, fallback }: ForProps<T>)
 ```
 
-### Lazy
+### LazyComponent
 
-Component Wrapper to lazy loading a Component. [See demo](https://ndriadev.github.io/react-tools/#/components/Lazy)
+Component Wrapper to lazy loading a Component. [See demo](https://ndriadev.github.io/react-tools/#/components/LazyComponent)
 ```tsx
-Lazy<T extends { default: ComponentType<unknown> } | { [k: string]: ComponentType<unknown> }>({ factory, componentName, fallback, beforeLoad, afterLoad }: { factory: () => Promise<T>, componentName?: string, fallback?: ReactNode, beforeLoad?: ()=>void, afterLoad?: ()=>void })
+LazyComponent<T extends { default: ComponentType<unknown> } | { [k: string]: ComponentType<unknown> }>({ factory, componentName, fallback, beforeLoad, afterLoad }: { factory: () => Promise<T>, componentName?: string, fallback?: ReactNode, beforeLoad?: ()=>void, afterLoad?: ()=>void })
 ```
 
 ### Show

apps/react-tools-demo/src/layout/MainLayout.tsx

@@ -1275,15 +1275,15 @@ export default function MainLayout() {
 							For
 						</Link>
 						<Link
-							className={pathname === "/components/Lazy" ? 'active' : ''}
-							ref={node => linksRef.current["Lazy"] = node}
-							to="/components/Lazy"
+							className={pathname === "/components/LazyComponent" ? 'active' : ''}
+							ref={node => linksRef.current["LazyComponent"] = node}
+							to="/components/LazyComponent"
 							onClick={() => {
 								containerRef.current?.scrollTo(0, 0);
 								window.innerWidth < 1190 && closeNav();
 							}}
 						>
-							Lazy
+							LazyComponent
 						</Link>
 						<Link
 							className={pathname === "/components/Show" ? 'active' : ''}

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

@@ -0,0 +1,49 @@
+# LazyComponent
+Component Wrapper to lazy loading a Component. [See demo](https://ndriadev.github.io/react-tools/#/components/LazyComponent)
+
+## Usage
+
+```tsx
+export default function LC() {
+	return (
+		<LazyComponent
+			factory={() => import('./LazyComp').then(async res => {
+				await new Promise(resolve => setTimeout(resolve, 5000));
+				return res;
+			})}
+			fallback={<p>Loading component...</p>}
+		/>
+	);
+}
+```
+
+> The component uses _LazyComponent_ component to lazy load a component imported dynamically by _factory_ prop. The component loading is delayed by 5 seconds. During this time, _fallback_ prop is shown that renders a p element with the text __Loading component...__.
+
+
+## API
+
+```tsx
+LazyComponent<T extends { default: ComponentType<unknown> } | { [k: string]: ComponentType<unknown> }>({ factory, componentName, fallback, beforeLoad, afterLoad }: { factory: () => Promise<T>, componentName?: string, fallback?: ReactNode, beforeLoad?: ()=>void, afterLoad?: ()=>void })
+```
+
+> ### Params
+>
+> - __param__: _Object_  
+properties to load component.
+> - __param.factory__: _() => Promise<{ [k:string]: T }>_  
+function that returns a Promise or another thenable.
+> - __param.componentName?__: _string_  
+name of the of the module to load lazy. If it is missing, and the _load_ execution result not have a default property, the first key in res is returned as result.
+> - __object.fallback?__: _ReactNode_  
+optional element to render when _when_ prop is false.
+> - __param.beforeLoad?__: _()=>void_  
+function that will be executed before loading component .
+> - __param.afterLoad?__: _()=>void_  
+function that will be executed after loading component .
+>
+
+> ### Returns
+>
+> __element__
+> - _JSX.Element_  
+>

apps/react-tools-demo/src/pages/components/lazy/Lazy.tsx

@@ -0,0 +1,16 @@
+import { LazyComponent } from "../../../../../../packages/react-tools-lib/src";
+
+/**
+The component uses _LazyComponent_ component to lazy load a component imported dynamically by _factory_ prop. The component loading is delayed by 5 seconds. During this time, _fallback_ prop is shown that renders a p element with the text __Loading component...__.
+ */
+export default function LC() {
+	return (
+		<LazyComponent
+			factory={() => import('./LazyComp').then(async res => {
+				await new Promise(resolve => setTimeout(resolve, 5000));
+				return res;
+			})}
+			fallback={<p>Loading component...</p>}
+		/>
+	);
+}

…/pages/components/lazy/LazyComponent.tsx …es/components/lazyComponent/LazyComp.tsxapps/react-tools-demo/src/pages/components/lazy/LazyComponent.tsx renamed to apps/react-tools-demo/src/pages/components/lazyComponent/LazyComp.tsx apps/react-tools-demo/src/pages/components/lazy/LazyComponent.tsx renamed to apps/react-tools-demo/src/pages/components/lazyComponent/LazyComp.tsx

@@ -5,7 +5,7 @@ import ComponentLayout from '../layout/ComponentLayout';
 import { Spinner } from '../layout/Spinner';
 import ErrorBoundaryMD from "../markdown/ErrorBoundary.md?raw"
 import ForMD from "../markdown/For.md?raw"
-import LazyMD from "../markdown/Lazy.md?raw"
+import LazyComponentMD from "../markdown/LazyComponent.md?raw"
 import ShowMD from "../markdown/Show.md?raw"
 import SwitchCaseMD from "../markdown/SwitchCase.md?raw"
 import alphanumericCompareMD from "../markdown/alphanumericCompare.md?raw"
@@ -137,7 +137,7 @@ import useWebWorkerMD from "../markdown/useWebWorker.md?raw"
 import useWebWorkerFnMD from "../markdown/useWebWorkerFn.md?raw"
 const ErrorBoundary = lazy((() => import('../pages/components/errorBoundary/ErrorBoundary').then(module => ({default: "default" in module ? module["default"] : module["ErrorBoundary"]}))) as unknown as () => Promise<{ default: ComponentType; }>)
 const For = lazy((() => import('../pages/components/for/For').then(module => ({default: "default" in module ? module["default"] : module["For"]}))) as unknown as () => Promise<{ default: ComponentType; }>)
-const Lazy = lazy((() => import('../pages/components/lazy/Lazy').then(module => ({default: "default" in module ? module["default"] : module["Lazy"]}))) as unknown as () => Promise<{ default: ComponentType; }>)
+const LazyComponent = lazy((() => import('../pages/components/lazyComponent/LazyComponent').then(module => ({default: "default" in module ? module["default"] : module["LazyComponent"]}))) as unknown as () => Promise<{ default: ComponentType; }>)
 const Show = lazy((() => import('../pages/components/show/Show').then(module => ({default: "default" in module ? module["default"] : module["Show"]}))) as unknown as () => Promise<{ default: ComponentType; }>)
 const SwitchCase = lazy((() => import('../pages/components/switchCase/SwitchCase').then(module => ({default: "default" in module ? module["default"] : module["SwitchCase"]}))) as unknown as () => Promise<{ default: ComponentType; }>)
 import HomeWrapper from '../pages/home/HomeWrapper'
@@ -999,9 +999,9 @@ function Router() {
 						</Suspense>
 					},
 					{
-						path: "Lazy",
+						path: "LazyComponent",
 						element: <Suspense fallback={<Spinner/>}>
-							<ComponentLayout markdown={LazyMD} component={<Lazy/>}/>
+							<ComponentLayout markdown={LazyComponentMD} component={<LazyComponent/>}/>
 						</Suspense>
 					},
 					{
@@ -1115,7 +1115,7 @@ function Router() {
 					{
 						path: "lazy",
 						element: <Suspense fallback={<Spinner/>}>
-							<ComponentLayout markdown={lazyMD} component={<Lazy/>}/>
+							<ComponentLayout markdown={lazyMD} />
 						</Suspense>
 					},
 					{

apps/react-tools-demo/src/pages/components/lazyComponent/LazyComponent.tsx

@@ -4,7 +4,7 @@ import mkcert from 'vite-plugin-mkcert'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	base:"react-tools",
+	base:"/react-tools",
 	server: {
 		host: true,
 		https: true