docs(TwaLoader): better doc description

docs/README.md

@@ -807,13 +807,23 @@ Renders its props depends on was TWA loaded or not
 ```tsx
 import { TwaLoader } from '@altiore/twa';
 
-<TwaLoader
-	loading={<p>...loading</p>}
-	isTWApp={<p>I am a Telegram App!</p>}
-	noTWApp={<p>I am non Telegram App (simple web app)</p>}
-/>;
+return (
+	<TwaLoader
+		isTWApp={<p>Telegram App!</p>}
+		loading={<p>...loading</p>}
+		noTWApp={<p>Regular web application</p>}
+		oldTWApp={<p>Telegram App (OLD non supportedversion)</p>}
+		versionAtLeast={'6.9'}
+	/>
+);
 ```
 
+#### Parameters
+
+| Name    | Type                                             |
+| :------ | :----------------------------------------------- |
+| `props` | [`TwaLoaderProps`](interfaces/TwaLoaderProps.md) |
+
 #### Returns
 
 one of provided prop

docs/interfaces/TwaLoaderProps.md

@@ -0,0 +1,67 @@
+[@altiore/twa](../README.md) / TwaLoaderProps
+
+# Interface: TwaLoaderProps
+
+The props type of [`TwaLoader`](../README.md#twaloader).
+
+## Table of contents
+
+### Properties
+
+- [isTWApp](TwaLoaderProps.md#istwapp)
+- [loading](TwaLoaderProps.md#loading)
+- [noTWApp](TwaLoaderProps.md#notwapp)
+- [oldTWApp](TwaLoaderProps.md#oldtwapp)
+- [versionAtLeast](TwaLoaderProps.md#versionatleast)
+
+## Properties
+
+### isTWApp
+
+• `Optional` **isTWApp**: `React.JSX.Element`
+
+#### Type declaration
+
+▸ React.JSX.Element
+
+React Element will be shown in case if Telegram Web Application was successfully loaded and ready to use
+
+### loading
+
+• `Optional` **loading**: `React.JSX.Element`
+
+#### Type declaration
+
+▸ React.JSX.Element
+
+React Element will be shown wile Telegram Web Application loading (preparing for usage)
+
+### noTWApp
+
+• `Optional` **noTWApp**: `React.JSX.Element`
+
+#### Type declaration
+
+▸ React.JSX.Element
+
+React Element will be shown in case if application was loaded outside Telegram
+
+### oldTWApp
+
+• `Optional` **oldTWApp**: `React.JSX.Element`
+
+#### Type declaration
+
+▸ React.JSX.Element
+
+React Element will be shown in case if Telegram Web Application non-supported version (less, then versionAtLeast provided)
+
+### versionAtLeast
+
+• `Optional` **versionAtLeast**: `string` | `number`
+
+#### Type declaration
+
+▸ `string` | `number`
+
+Minimum supported version by current application. Using for [isTWApp](TwaLoaderProps.md#istwapp)|[oldTWApp](TwaLoaderProps.md#oldtwapp) components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altiore/twa",
-  "version": "2.4.16",
+  "version": "2.4.19",
   "description": "React components for Telegram WebApp",
   "source": "./src/index.ts",
   "type": "module",

src/TwaLoader.tsx

@@ -7,35 +7,39 @@ interface IProps {
 	loading?: React.JSX.Element;
 	isTWApp?: React.JSX.Element;
 	noTWApp?: React.JSX.Element;
-	minVersion?: string | number;
+	oldTWApp?: React.JSX.Element;
+	versionAtLeast?: string | number;
 }
 
 export const TwaLoader: FC<IProps> = ({
 	loading = null,
 	isTWApp = null,
 	noTWApp = null,
-	minVersion,
+	oldTWApp = null,
+	versionAtLeast,
 }): React.JSX.Element | null => {
 	useEffect(() => {
-		if (!loading && !isTWApp && !noTWApp) {
+		if (!loading && !isTWApp && !noTWApp && !oldTWApp) {
 			throw new Error(
-				'Please, provide at least one of loading, isTWApp or noTWApp prop! No' +
+				'Please, provide at least one of loading, isTWApp, noTWApp or oldTWApp prop! No' +
 					' sense of component without all this props',
 			);
 		}
-	}, [loading, isTWApp, noTWApp]);
+	}, [loading, isTWApp, noTWApp, oldTWApp]);
 
 	const { isLoaded, isLoading } = useTwa();
 
-	const isCorrectVersion = useVersionAtLeast(
-		minVersion ? String(minVersion) : undefined,
-	);
+	const isCorrectVersion = useVersionAtLeast(versionAtLeast);
 
 	if (isLoading) {
 		return loading;
 	}
 
-	if (isLoaded && (!minVersion || isCorrectVersion)) {
+	if (versionAtLeast && !isCorrectVersion) {
+		return oldTWApp;
+	}
+
+	if (isLoaded && (!versionAtLeast || isCorrectVersion)) {
 		return isTWApp;
 	}
 

src/useVersionAtLeast.ts

@@ -15,8 +15,13 @@ export const useVersionAtLeast = (
 ): boolean => {
 	const WebApp = useWebApp();
 
+	const isVersionAtLeast = useMemo(() => WebApp?.isVersionAtLeast, [WebApp]);
+
 	return useMemo<boolean>(
-		() => (version ? Boolean(WebApp?.isVersionAtLeast?.(version)) : false),
-		[WebApp, version],
+		() =>
+			version && isVersionAtLeast
+				? Boolean(isVersionAtLeast?.(String(version)))
+				: false,
+		[isVersionAtLeast, version],
 	);
 };