Feat / swipe optimizations, features and fixes

docs/docs/examples-advanced/responsive-slider.mdx

@@ -10,7 +10,6 @@ The `useResponsiveSize` hook is optimized and only re-renders when the current b
 
 ## Example
 
-
 import { ResponsiveSlider } from './advanced-examples';
 
 <ResponsiveSlider />
@@ -21,7 +20,7 @@ import { ResponsiveSlider } from './advanced-examples';
 import { TileSlider, useResponsiveSize } from '@videodock/tile-slider';
 
 const Slider = () => {
-  const [tilesToShow] = useResponsiveSize([{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }]);
+  const [tilesToShow] = useResponsiveSize([{ xs: 2, sm: 2, md: 3, lg: 4, xl: 5 }]);
 
   return (
     <TileSlider

docs/docs/examples-advanced/with-ref.mdx

@@ -0,0 +1,69 @@
+---
+sidebar_position: 5
+---
+
+# With ref
+
+## Example
+
+import { WithRefExample } from '../helpers';
+import '../../../src/style.css';
+
+<WithRefExample />
+
+## Code
+
+```tsx
+import { TileSlider, type TileSliderRef } from '@videodock/tile-slider';
+
+const Slider = () => {
+  const tileSliderRef = useRef<TileSliderRef>();
+  const [state, setState] = useState({ index: 0, itemIndex: 0, page: 0 });
+
+  return (
+    <>
+      <TileSlider
+        ref={tileSliderRef}
+        tilesToShow={3}
+        renderTile={renderTile}
+        items={items}
+        renderRightControl={renderRightControl}
+        renderLeftControl={renderLeftControl}
+        onSlideEnd={({ index, itemIndex, page }) => setState({ index, itemIndex, page })}
+      />
+      <hr />
+      <h3>State</h3>
+      <div>
+        <label>Current index:</label> {state.index}{' '}
+      </div>
+      <div>
+        <label>Current item index:</label> {state.itemIndex}{' '}
+      </div>
+      <div>
+        <label>Current page:</label> {state.page}
+      </div>
+      <h3>Controls</h3>
+      <div>
+        <strong>slide(direction: &apos;left&apos; | &apos;right&apos;)</strong>
+        <br />
+        <button onClick={() => tileSliderRef.current?.slide('left')}>Slide left</button>{' '}
+        <button onClick={() => tileSliderRef.current?.slide('right')}>Slide right</button>
+      </div>
+      <div>
+        <strong>slideToIndex(index: number)</strong>
+        <br />
+        <button onClick={() => tileSliderRef.current?.slideToIndex(0)}>Slide to index: 0</button>{' '}
+        <button onClick={() => tileSliderRef.current?.slideToIndex(10)}>Slide to index: 10</button>{' '}
+        <button onClick={() => tileSliderRef.current?.slideToIndex(100)}>Slide to index: 100</button>
+        <button onClick={() => tileSliderRef.current?.slideToIndex(105, true)}>Slide to index: 105 (closest)</button>
+      </div>
+      <div>
+        <strong>slideToPage(page: number)</strong>
+        <br />
+        <button onClick={() => tileSliderRef.current?.slideToPage(0)}>Slide to page 0</button>{' '}
+        <button onClick={() => tileSliderRef.current?.slideToPage(3)}>Slide to page 3</button>
+      </div>
+    </>
+  );
+};
+```

docs/docs/examples/no-pages.mdx

@@ -0,0 +1,61 @@
+---
+sidebar_position: 6
+---
+
+# No pages
+
+
+## Example
+
+import { TileSlider } from '../../../src';
+import { items, renderLeftControl, renderRightControl, renderTile } from '../helpers';
+import '../../../src/style.css';
+
+<TileSlider tilesToShow={3} renderTile={renderTile} items={items.slice(0, 3)} renderRightControl={renderRightControl} renderLeftControl={renderLeftControl} />
+
+## Code
+
+```tsx
+import { TileSlider, type RenderTile, type RenderControl } from '@videodock/tile-slider';
+
+type Tile = {
+  title: string;
+  image: string;
+};
+
+// create example data set with 10 tiles
+const items: Tile[] = Array.from({ length: 10 }, (_, index) => ({
+  title: `Tile ${index}`,
+  image: `/img/${index}.jpg`,
+}));
+
+const renderTile: RenderTile<Tile> = ({ item, isVisible }) => (
+  <div className={`exampleTile ${!isVisible ? 'outOfView' : ''}`}>
+    <img src={item.image} alt={item.title} />
+  </div>
+);
+
+const renderLeftControl: RenderControl = ({ onClick }) => (
+  <button className="control" onClick={onClick}>
+    <IconLeft />
+  </button>
+);
+
+const renderRightControl: RenderControl = ({ onClick }) => (
+  <button className="control" onClick={onClick}>
+    <IconRight />
+  </button>
+);
+
+const Slider = () => {
+  return (
+    <TileSlider
+      tilesToShow={3}
+      renderTile={renderTile}
+      items={items}
+      renderRightControl={renderRightControl}
+      renderLeftControl={renderLeftControl}
+    />
+  );
+};
+```

docs/docs/helpers.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import siteConfig from '@generated/docusaurus.config';
 
-import { RenderControl, RenderPagination, RenderTile } from '../../src';
+import { RenderControl, RenderPagination, RenderTile, TileSlider, TileSliderRef } from '../../src';
 
 export type Tile = {
   title: string;
@@ -97,7 +97,6 @@ export const makeItems = (length: number): Tile[] =>
     };
   });
 
-
 export function easeOutElastic(currentTime: number, startValue: number, changeInValue: number, duration: number): number {
   if (currentTime === 0) {
     return startValue;
@@ -116,6 +115,51 @@ export function easeOutElastic(currentTime: number, startValue: number, changeIn
   );
 }
 
+export const WithRefExample = () => {
+  const tileSliderRef = useRef<TileSliderRef>();
+  const [state, setState] = useState({ index: 0, itemIndex: 0, page: 0 });
+
+  return (
+    <>
+      <TileSlider
+        ref={tileSliderRef}
+        tilesToShow={3}
+        renderTile={renderTile}
+        items={items}
+        renderRightControl={renderRightControl}
+        renderLeftControl={renderLeftControl}
+        onSlideEnd={({ index, itemIndex, page }) => setState({ index, itemIndex, page })}
+      />
+      <hr />
+      <h3>State</h3>
+      <div><label>Current index:</label> {state.index} </div>
+      <div><label>Current item index:</label> {state.itemIndex} </div>
+      <div><label>Current page:</label> {state.page}</div>
+      <h3>Controls</h3>
+      <div>
+        <strong>slide(direction: &apos;left&apos; | &apos;right&apos;)</strong>
+        <br />
+        <button onClick={() => tileSliderRef.current?.slide('left')}>Slide left</button>{' '}
+        <button onClick={() => tileSliderRef.current?.slide('right')}>Slide right</button>
+      </div>
+      <div>
+        <strong>slideToIndex(index: number)</strong>
+        <br />
+        <button onClick={() => tileSliderRef.current?.slideToIndex(0)}>Slide to index: 0</button>{' '}
+        <button onClick={() => tileSliderRef.current?.slideToIndex(10)}>Slide to index: 10</button>{' '}
+        <button onClick={() => tileSliderRef.current?.slideToIndex(100)}>Slide to index: 100</button>
+        <button onClick={() => tileSliderRef.current?.slideToIndex(105, true)}>Slide to index: 105 (closest)</button>
+      </div>
+      <div>
+        <strong>slideToPage(page: number)</strong>
+        <br />
+        <button onClick={() => tileSliderRef.current?.slideToPage(0)}>Slide to page 0</button>{' '}
+        <button onClick={() => tileSliderRef.current?.slideToPage(3)}>Slide to page 3</button>
+      </div>
+    </>
+  );
+};
+
 export const items = makeItems(10);
 export const moreItems = makeItems(50);
 export const manyItems = makeItems(5000);