Error loading image
}
+/>
+```
+
+#### Fallback src images
+
+```jsx
+Error loading image
}
+/>
+```
+
+#### Lazy loading
+
+By default, `lazy` is set to `false`, which means the image will be loaded immediately. If `lazy` is set to `true`,
+the image will only be loaded when it enters the viewport. This is achieved using the Intersection Observer pattern.
+For correct lazy loading, it is also necessary to pass the `fallback` attribute, which will be placeholder as a placeholder until the image is loaded.
+
+By default, `lazy` is set to `false`, which means the image will be loaded immediately. If `lazy` is set to `true`,
+the image will only be loaded when it enters the viewport. This is achieved using the Intersection Observer pattern.
+For correct lazy loading, it is also necessary to pass the `fallback` attribute, which will serve as a placeholder until the image is loaded.
+
+```jsx
+
+ {content}
+
+ );
+
+ useImperativeHandle(forwardedRef, () => internalRef.current as HTMLImageElement);
+
+ if (fallback && isLoading) {
+ return renderFallback(fallback, rootFallbackClassName);
+ }
+
+ if (errorFallback && isError) {
+ return renderFallback(errorFallback, rootErrorFallbackClassName);
+ }
+
+ if (fallbackSrc && isLoading) return renderImage(fallbackSrc);
+
+ if (errorFallbackSrc && isError) return renderImage(errorFallbackSrc);
+
+ return renderImage(src);
+});
+
+Image.displayName = 'Image';
+
+export default Image;
diff --git a/components/image/src/Image.types.ts b/components/image/src/Image.types.ts
new file mode 100644
index 00000000..1185d274
--- /dev/null
+++ b/components/image/src/Image.types.ts
@@ -0,0 +1,34 @@
+import { Dispatch, ImgHTMLAttributes, ReactElement, SetStateAction } from 'react';
+import { Callback } from '@byndyusoft-ui/types';
+import { IUseIntersectionObserverOptions } from '@byndyusoft-ui/use-intersection-observer';
+
+export interface IImageProps extends ImgHTMLAttributes
+ Error Fallback
+
+);
+
+const Template = ({ mockLoadImageIds, imageProps }: ITemplateProps): JSX.Element => {
+ const [idList, setIdList] = useState(mockLoadImageIds() || []);
+
+ const onRefreshIdList = () => {
+ if (!mockLoadImageIds) return;
+ setIdList(mockLoadImageIds);
+ };
+
+ return (
+
+
+ {idList?.map((id, index) => (
+
+ );
+};
+
+export const LazyFallbackSkeleton: StoryObjLoading...
},
+ useImageReturn: { isLoading: true }
+ });
+
+ const fallbackElement = screen.getByText('Loading...');
+ expect(fallbackElement).toBeInTheDocument();
+ });
+
+ test('renders fallbackSrc image when loading', () => {
+ setup({
+ imageProps: { fallbackSrc: 'fallback-image.jpg' },
+ useImageReturn: { isLoading: true }
+ });
+ const fallbackImgElement = screen.getByAltText('Test Image');
+ expect(fallbackImgElement).toBeInTheDocument();
+ expect(fallbackImgElement).toHaveAttribute('src', 'fallback-image.jpg');
+ });
+
+ test('renders correctly when lazy is disabled', () => {
+ setup({ imageProps: { lazy: false } });
+ const imgElement = screen.getByAltText('Test Image');
+ expect(imgElement).toBeInTheDocument();
+ expect(imgElement).toHaveAttribute('src', 'test-image.jpg');
+ });
+
+ test('renders error fallback content when image fails to load', () => {
+ setup({
+ imageProps: { errorFallback: Error loading image
, lazy: false },
+ useImageReturn: { isError: true }
+ });
+ const errorElement = screen.getByText('Error loading image');
+ expect(errorElement).toBeInTheDocument();
+ });
+});
diff --git a/components/image/src/__tests__/image.mocks.ts b/components/image/src/__tests__/image.mocks.ts
new file mode 100644
index 00000000..e5561c5d
--- /dev/null
+++ b/components/image/src/__tests__/image.mocks.ts
@@ -0,0 +1,47 @@
+interface IObserverData {
+ callback: IntersectionObserverCallback;
+ elements: Set
+
+ );
+};
+```
+
+### Usage `useIntersectionObserver` with options
+
+```jsx
+import React from "react";
+import { useIntersectionObserver } from "@byndyusoft-ui/use-intersection-observer";
+
+const Component = () => {
+ const containerRef = useRef
+ {`isIntersecting: ${isIntersecting}`}
+
+
+
+ );
+};
+```
+### Options
+
+Provide these as the options argument in the `useIntersectionObserver ` hook.
+
+| Name | Type | Default | Description |
+|------------------------------------|-----------------------------------| ----------- |---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **root** | `Element` | `document` | The Intersection Observer interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is `null`, then the bounds of the actual document viewport are used. |
+| **rootMargin** | `string` | `'0px'` | Margin around the root. Can have values similar to the CSS margin property, e.g. `"10px 20px 30px 40px"` (top, right, bottom, left). Also supports percentages, to check if an element intersects with the center of the viewport for example `"-50% 0% -50% 0%"`. |
+| **threshold** | `number` or `number[]` | `0` | Number between `0` and `1` indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. |
+| **onChange** | `(isIntersecting, entry) => void` | `undefined` | Call this function whenever the `isIntersecting` state changes. It will receive the `isIntersecting` boolean, alongside the current `IntersectionObserverEntry`. |
+| **trackVisibility** (experimental) | `boolean` | `false` | A boolean indicating whether this Intersection Observer will track visibility changes on the target. |
+| **delay** (experimental) | `number` | `undefined` | A number indicating the minimum delay in milliseconds between notifications from this observer for a given target. This must be set to at least `100` if `trackVisibility` is `true`. |
+| **skip** | `boolean` | `false` | Skip creating the IntersectionObserver. You can use this to enable and disable the observer as needed. If `skip` is set while `isIntersecting`, the current state will still be kept. |
+| **triggerOnce** | `boolean` | `false` | Only trigger the observer once. |
+| **isIntersectingInitial** | `boolean` | `false` | Set the initial value of the `isIntersecting` boolean. This can be used if you expect the element to be in the viewport to start with, and you want to trigger something when it leaves. |
+| **isIntersectingFallback** | `boolean` | `undefined` | If the `IntersectionObserver` API isn't available in the client, the default behavior is to throw an Error. You can set a specific fallback behavior, and the `isIntersecting` value will be set to this instead of failing. To set a global default, you can set it with the `defaultFallbackInView()` |
diff --git a/hooks/use-intersection-observer/package.json b/hooks/use-intersection-observer/package.json
new file mode 100644
index 00000000..5f9af423
--- /dev/null
+++ b/hooks/use-intersection-observer/package.json
@@ -0,0 +1,33 @@
+{
+ "name": "@byndyusoft-ui/use-intersection-observer",
+ "version": "0.0.1",
+ "description": "Byndyusoft UI React Hook",
+ "keywords": [
+ "byndyusoft",
+ "byndyusoft-ui",
+ "react",
+ "hook",
+ "intersection-observer"
+ ],
+ "author": "Gleb Fomin
+ {`isIntersecting: ${isIntersecting}`}
+
+
+
+ );
+};
+
+export const Default: StoryObj
+
+ {title}
+ {isExperimental && ( +
+
+ )}
+ Warning: The {title} feature may not work in all browsers.
+ + Read more. + +
+ isIntersecting:
+
+ {String(isIntersecting)}
+
+ Entry:
+
+
+
+
+ Scroll down
+ {!!options?.rootMargin && (
+
+ {options.rootMargin}
+
+ )}
+
+ {isIntersecting ? 'In View' : 'Out of View'}
+
+ {!!options?.rootMargin && (
+
+ {options.rootMargin}
+
+ )}
+ Scroll up
+
+ {isIntersecting.toString()}
+
+ );
+};
+
+const LazyHookComponent = ({ options, unmount }: IComponentProps) => {
+ const [isLoading, setIsLoading] = React.useState(true);
+
+ React.useEffect(() => {
+ setIsLoading(false);
+ }, []);
+
+ const { ref, isIntersecting } = useIntersectionObserver(options);
+
+ if (isLoading) return Loading
;
+
+ return (
+
+ {isIntersecting.toString()}
+
+ );
+};
+
+const HookComponentWithEntry = ({ options, unmount }: IComponentProps) => {
+ const { ref, entry } = useIntersectionObserver(options);
+ return (
+
+ {entry && Object.entries(entry).map(([key, value]) => `${key}: ${value}`)}
+
+ );
+};
+
+const setupHookComponent = (props: IComponentProps = {}) => render(