1<!DOCTYPE html><html lang="en" class="inter_709f7113-module__S4rG8G__variable fira_code_af5fb8ee-module__X-BCKq__variable"><head><meta charSet="utf-8"/><link rel="preconnect" href="https://assets.react-photo-album.com"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="https://assets.react-photo-album.com/_next/static/immutable/media/83afe278b6a6bb3c-s.p.45535valc9rzk.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="https://assets.react-photo-album.com/_next/static/immutable/media/b8b552e8609c5636-s.p.1mao1hin7sitq.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="https://assets.react-photo-album.com/_next/static/immutable/chunks/2h86bkwzmn_lt.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="https://assets.react-photo-album.com/_next/static/immutable/chunks/36k8in9a291ok.js"/>
1<script src="https://assets.react-photo-album.com/_next/static/immutable/chunks/0hw-nq04guk_f.js" async=""></script>
1<script src="https://assets.react-photo-album.com/_next/static/immutable/chunks/0lyzihd-7_-q7.js" async=""></script>
1<script src="https://assets.react-photo-album.com/_next/static/immutable/chunks/3wc_kxht-4htf.js" async=""></script>
1<script src="https://assets.react-photo-album.com/_next/static/immutable/chunks/turbopack-2_pg2nb8oj9yr.js" async=""></script>
1<script src="https://assets.react-photo-album.com/_next/static/immutable/chunks/1ty7z5-qzonhg.js" async=""></script>
1<script src="https://assets.react-photo-album.com/_next/static/immutable/chunks/3-sc2wqugqoo_.js" async=""></script>
1<script src="https://assets.react-photo-album.com/_next/static/immutable/chunks/1xdqp_r9jcv98.js" async=""></script>
1<meta name="theme-color" content="#1a237e"/><title>Documentation | React Photo Album</title><meta name="description" content="React Photo Album allows you to build a responsive photo gallery in React in minutes. To get started, follow the Installation and Minimal Setup Example guides, or feel free to explore the collection of CodeSandbox demos."/><link rel="manifest" href="/site.webmanifest"/><meta name="msapplication-TileColor" content="#1a237e"/><link rel="canonical" href="https://react-photo-album.com/documentation"/><meta property="og:title" content="React Photo Album | Documentation"/><meta property="og:description" content="React Photo Album allows you to build a responsive photo gallery in React in minutes. To get started, follow the Installation and Minimal Setup Example guides, or feel free to explore the collection of CodeSandbox demos."/><meta property="og:url" content="https://react-photo-album.com/documentation"/><meta property="og:site_name" content="React Photo Album"/><meta property="og:locale" content="en_US"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="React Photo Album | Documentation"/><meta name="twitter:description" content="React Photo Album allows you to build a responsive photo gallery in React in minutes. To get started, follow the Installation and Minimal Setup Example guides, or feel free to explore the collection of CodeSandbox demos."/><link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png"/><link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"/><link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"/><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1a237e"/><meta name="next-size-adjust" content=""/>
1<script id="select-theme">!function(){var e,l,a,n=null===(e=(l=window).matchMedia)||void 0===e?void 0:e.call(l,"(prefers-color-scheme: dark)");function t(){"dark"===localStorage.theme||!("theme"in localStorage)&&null!=n&&n.matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}t(),null==n||null===(a=n.addEventListener)||void 0===a||a.call(n,"change",t)}();</script>
1<script src="https://assets.react-photo-album.com/_next/static/immutable/chunks/0c0hxoamwjsbw.js" noModule=""></script>
1</head><body><div hidden=""><!--$--><!--/$--></div><div class="mx-auto max-w-screen-xl"><header class="fixed inset-x-0 top-0 w-full z-50 bg-primary text-secondary shadow-toolbar print:text-primary"><nav class="flex items-center w-full h-16 mx-auto px-4 md:px-6 text-xl xs:text-[1.375rem] sm:text-2xl max-w-screen-xl"><button type="button" class="not-prose relative box-border outline-0 outline-none m-0 border-0 cursor-pointer select-none align-middle no-underline hover:no-underline overflow-hidden transition duration-300 [-webkit-tap-highlight-color:transparent] p-2 shrink-0 rounded-full hover:bg-secondary/5 block md:hidden mr-2 -ml-2.5 text-2xl xs:text-3xl print:!hidden" title="Navigation Menu"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="select-none fill-current w-[1em] h-[1em]"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></button><a class="p-2 -ml-2 mr-auto font-bold rounded-lg focus:outline-none focus-visible:ring focus-visible:no-underline" href="/">React Photo Album</a><button type="button" class="not-prose relative box-border outline-0 outline-none m-0 border-0 cursor-pointer select-none align-middle no-underline hover:no-underline overflow-hidden transition duration-300 [-webkit-tap-highlight-color:transparent] p-2 shrink-0 rounded-full hover:bg-secondary/5 text-2xl xs:text-3xl print:!hidden hidden [@media(min-width:23.125rem)]:block [:is(html.dark)_&]:hidden" title="Switch to Dark Mode"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="select-none fill-current w-[1em] h-[1em]"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"></path></svg></button><button type="button" class="not-prose relative box-border outline-0 outline-none m-0 border-0 cursor-pointer select-none align-middle no-underline hover:no-underline overflow-hidden transition duration-300 [-webkit-tap-highlight-color:transparent] p-2 shrink-0 rounded-full hover:bg-secondary/5 text-2xl xs:text-3xl print:!hidden hidden [@media(min-width:23.125rem)]:block [:is(html:not(.dark))_&]:hidden" title="Switch to Light Mode"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="select-none fill-current w-[1em] h-[1em]"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"></path></svg></button><a href="https://www.npmjs.com/package/react-photo-album" target="_blank" rel="noreferrer noopener" class="not-prose relative box-border outline-0 outline-none m-0 border-0 cursor-pointer select-none align-middle no-underline hover:no-underline overflow-hidden transition duration-300 [-webkit-tap-highlight-color:transparent] p-2 shrink-0 rounded-full hover:bg-secondary/5 text-2xl xs:text-3xl print:!hidden hidden [@media(min-width:20.625rem)]:block" title="NPM Package"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="select-none fill-current w-[1em] h-[1em]"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2h20v20h-20v-20M5.421 5.421h13.158v13.158h-3.333v-9.825h-3.246v9.825h-6.579v-13.158Z"></path></svg></a><a href="https://github.com/igordanchenko/react-photo-album" target="_blank" rel="noreferrer noopener" class="not-prose relative box-border outline-0 outline-none m-0 border-0 cursor-pointer select-none align-middle no-underline hover:no-underline overflow-hidden transition duration-300 [-webkit-tap-highlight-color:transparent] p-2 shrink-0 rounded-full hover:bg-secondary/5 -mr-2 text-2xl xs:text-3xl print:!hidden hidden [@media(min-width:18.7
15rem)]:block" title="GitHub Repository"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="select-none fill-current w-[1em] h-[1em]"><path d="M12 1.27a11 11 0 00-3.48 21.46c.55.09.73-.28.73-.55v-1.84c-3.03.64-3.67-1.46-3.67-1.46-.55-1.29-1.28-1.65-1.28-1.65-.92-.65.1-.65.1-.65 1.1 0 1.73 1.1 1.73 1.1.92 1.65 2.57 1.2 3.21.92a2 2 0 01.64-1.47c-2.47-.27-5.04-1.19-5.04-5.5 0-1.1.46-2.1 1.2-2.84a3.76 3.76 0 010-2.93s.91-.28 3.11 1.1c1.8-.49 3.7-.49 5.5 0 2.1-1.38 3.02-1.1 3.02-1.1a3.76 3.76 0 010 2.93c.83.74 1.2 1.74 1.2 2.94 0 4.21-2.57 5.13-5.04 5.4.45.37.82.92.82 2.02v3.03c0 .27.1.64.73.55A11 11 0 0012 1.27"></path></svg></a></nav></header><div class="hidden md:block w-[15rem] print:hidden"><div class="fixed mt-16 inset-y-0 w-[15rem] bg-background dark:bg-background-invert overflow-auto border-solid border-r border-r-paper-border dark:border-r-paper-border-invert"><nav class="flex flex-col py-3 bg-background dark:bg-background-invert z-20"><a class="pr-4 py-[0.625rem] outline-0 hover:bg-menu-hover dark:hover:bg-menu-hover-invert focus-visible:bg-menu-focus dark:focus-visible:bg-menu-focus-invert pl-6" href="/">Introduction</a><a class="pr-4 py-[0.625rem] outline-0 hover:bg-menu-hover dark:hover:bg-menu-hover-invert focus-visible:bg-menu-focus dark:focus-visible:bg-menu-focus-invert pl-6 font-bold dark:text-link-underline-invert" href="/documentation">Documentation</a><a class="pr-4 py-[0.625rem] outline-0 hover:bg-menu-hover dark:hover:bg-menu-hover-invert focus-visible:bg-menu-focus dark:focus-visible:bg-menu-focus-invert pl-6" href="/examples">Examples</a><a class="pr-4 py-[0.625rem] outline-0 hover:bg-menu-hover dark:hover:bg-menu-hover-invert focus-visible:bg-menu-focus dark:focus-visible:bg-menu-focus-invert pl-10" href="/examples/rows">Rows Layout</a><a class="pr-4 py-[0.625rem] outline-0 hover:bg-menu-hover dark:hover:bg-menu-hover-invert focus-visible:bg-menu-focus dark:focus-visible:bg-menu-focus-invert pl-10" href="/examples/columns">Columns Layout</a><a class="pr-4 py-[0.625rem] outline-0 hover:bg-menu-hover dark:hover:bg-menu-hover-invert focus-visible:bg-menu-focus dark:focus-visible:bg-menu-focus-invert pl-10" href="/examples/masonry">Masonry Layout</a><a class="pr-4 py-[0.625rem] outline-0 hover:bg-menu-hover dark:hover:bg-menu-hover-invert focus-visible:bg-menu-focus dark:focus-visible:bg-menu-focus-invert pl-10" href="/examples/playground">Playground</a><a class="pr-4 py-[0.625rem] outline-0 hover:bg-menu-hover dark:hover:bg-menu-hover-invert focus-visible:bg-menu-focus dark:focus-visible:bg-menu-focus-invert pl-10" href="/examples/customization">Customization</a><a class="pr-4 py-[0.625rem] outline-0 hover:bg-menu-hover dark:hover:bg-menu-hover-invert focus-visible:bg-menu-focus dark:focus-visible:bg-menu-focus-invert pl-10" href="/examples/sortable-gallery">Sortable Gallery</a><a class="pr-4 py-[0.625rem] outline-0 hover:bg-menu-hover dark:hover:bg-menu-hover-invert focus-visible:bg-menu-focus dark:focus-visible:bg-menu-focus-invert pl-10" href="/examples/nextjs">Next.js Image</a><a class="pr-4 py-[0.625rem] outline-0 hover:bg-menu-hover dark:hover:bg-menu-hover-invert focus-visible:bg-menu-focus dark:focus-visible:bg-menu-focus-invert pl-10" href="/examples/lightbox">Lightbox</a><a class="pr-4 py-[0.625rem] outline-0 hover:bg-menu-hover dark:hover:bg-menu-hover-invert focus-visible:bg-menu-focus dark:focus-visible:bg-menu-focus-invert pl-10" href="/examples/infinite-scroll">Infinite Scroll</a><a class="pr-4 py-[0.625rem] outline-0 hover:bg-menu-hover dark:hover:bg-menu-hover-invert focus-visible:bg-menu-focus dark:focus-visible:bg-menu-focus-invert pl-10" href="/examples/zero-cls-ssr">Zero CLS SSR</a><a class="pr-4 py-[0.625rem] outline-0 hover:bg-menu-hover dark:hover:bg-menu-hover-invert focus-visible:bg-menu-focus dark:focus-visible:bg-menu-focus-invert pl-10" href="/examples/server">Server Component</a><div class="flex sm:hidden text-2xl p-4 justify-around"><a href="https://github.com/igordanchenko/react-photo-album" target="_blank" rel="noreferrer noopener" class="not-prose relative box-border outline-0 outline-none m-0 border-0 cursor-pointer select-none align-middle no-underline hover:no-underline overflow-hidden transition duration-300 [-webkit-tap-highlight-color:transparent] p-2 shrink-0 rounded-full hover:bg-secondary/5" title="GitHub Repository"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="select-none fill-current w-[1em] h-[1em]"><path d="M12 1.27a11 11 0 00-3.48 21.46c.55.09.73-.28.73-.55v-1.84c-3.03.64-3.67-1.46-3.67-1.46-.55-1.29-1.28-1.65-1.28-1.65-.92-.65.1-.65.1-.65 1.1 0 1.73 1.1 1.73 1.1.92 1.65 2.57 1.2 3.21.92a2 2 0 01.64-1.47c-2.47-.27-5.04-1.19-5.04-5.5 0-1.1.46-2.1 1.2-2.84a3.76 3.76 0 010-2.93s.91-.28 3.11 1.1c1.8-.49 3.7-.49 5.5 0 2.1-1.38 3.02-1.1 3.02-1.1a3.76 3.76 0 010 2.93c.83.74 1.2 1.74 1.2 2.94 0 4.21-2.57 5.13-5.04 5.4.45.37.82.92.82 2.02v3.03c0 .27.1.64.73.55A11 11 0 0012 1.27"></path></svg></a><a href="https://www.npmjs.com/package/react-photo-album" target="_blank" rel="noreferrer noopener" class="not-prose relative box-border outline-0 outline-none m-0 border-0 cursor-pointer select-none align-middle no-underline hover:no-underline overflow-hidden transition duration-300 [-webkit-tap-highlight-color:transparent] p-2 shrink-0 rounded-full hover:bg-secondary/5" title="NPM Package"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="select-none fill-current w-[1em] h-[1em]"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2h20v20h-20v-20M5.421 5.421h13.158v13.158h-3.333v-9.825h-3.246v9.825h-6.579v-13.158Z"></path></svg></a><button type="button" class="not-prose relative box-border outline-0 outline-none m-0 border-0 cursor-pointer select-none align-middle no-underline hover:no-underline overflow-hidden transition duration-300 [-webkit-tap-highlight-color:transparent] p-2 shrink-0 rounded-full hover:bg-secondary/5 [:is(html.dark)_&]:hidden" title="Switch to Dark Mode"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="select-none fill-current w-[1em] h-[1em]"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"></path></svg></button><button type="button" class="not-prose relative box-border outline-0 outline-none m-0 border-0 cursor-pointer select-none align-middle no-underline hover:no-underline overflow-hidden transition duration-300 [-webkit-tap-highlight-color:transparent] p-2 shrink-0 rounded-full hover:bg-secondary/5 [:is(html:not(.dark))_&]:hidden" title="Switch to Light Mode"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="select-none fill-current w-[1em] h-[1em]"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"></path></svg></button></div></nav></div></div><main class="max-w-none md:ml-[15rem] print:md:ml-0 mt-16 py-8 px-4 md:px-6 scroll-mt-20 prose prose-slate dark:prose-invert">
1<h1 id="Documentation">Documentation<a href="#Documentation" title="Direct link to Documentation" aria-label="Direct link to Documentation"></a></h1> 2<p><a href="/">React Photo Album</a> allows you to build a responsive React photo gallery in 3minutes. To get started, follow the <a href="/#Installation">Installation</a> and 4<a href="/#MinimalSetupExample">Minimal Setup Example</a> guides, or feel free to explore 5the collection of <a href="/examples">examples</a> with live demos.</p> 6<p>Parameters marked with an asterisk (<span class="required"></span>) are required.</p> 7<h2 id="Prerequisites">Prerequisites<a href="#Prerequisites" title="Direct link to Prerequisites" aria-label="Direct link to Prerequisites"></a></h2> 8<p><a href="/">React Photo Album</a> provides four separate photo album components, depending 9on the layout you intend to use. Each component comes with its own CSS 10stylesheet.</p> 11<h3 id="Prerequisites_RowsLayout">Rows Layout<a href="#Prerequisites_RowsLayout" title="Direct link to Rows Layout" aria-label="Direct link to Rows Layout"></a></h3> 12<pre><code class="language-tsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> RowsPhotoAlbum <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-photo-album"</span><span class="token punctuation">;</span> 13<span class="token keyword">import</span> <span class="token string">"react-photo-album/rows.css"</span><span class="token punctuation">;</span> 14</code></pre> 15<h3 id="Prerequisites_ColumnsLayout">Columns Layout<a href="#Prerequisites_ColumnsLayout" title="Direct link to Columns Layout" aria-label="Direct link to Columns Layout"></a></h3> 16<pre><code class="language-tsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> ColumnsPhotoAlbum <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-photo-album"</span><span class="token punctuation">;</span> 17<span class="token keyword">import</span> <span class="token string">"react-photo-album/columns.css"</span><span class="token punctuation">;</span> 18</code></pre> 19<h3 id="Prerequisites_MasonryLayout">Masonry Layout<a href="#Prerequisites_MasonryLayout" title="Direct link to Masonry Layout" aria-label="Direct link to Masonry Layout"></a></h3> 20<pre><code class="language-tsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> MasonryPhotoAlbum <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-photo-album"</span><span class="token punctuation">;</span> 21<span class="token keyword">import</span> <span class="token string">"react-photo-album/masonry.css"</span><span class="token punctuation">;</span> 22</code></pre> 23<h3 id="Prerequisites_3-in-1">3-in-1<a href="#Prerequisites_3-in-1" title="Direct link to 3-in-1" aria-label="Direct link to 3-in-1"></a></h3> 24<p>If you use more than one layout in your app, you may opt for the aggregate 25component, which bundles all three layouts.</p> 26<pre><code class="language-tsx"><span class="token keyword">import</span> PhotoAlbum <span class="token keyword">from</span> <span class="token string">"react-photo-album"</span><span class="token punctuation">;</span> 27<span class="token keyword">import</span> <span class="token string">"react-photo-album/styles.css"</span><span class="token punctuation">;</span> 28</code></pre> 29<h2 id="CommonProps">Common Props<a href="#CommonProps" title="Direct link to Common Props" aria-label="Direct link to Common Props"></a></h2> 30<p>The following props are applicable to all three layouts.</p> 31<table class="docs"><thead><tr><th data-mono="true">Property</th><th data-mono="true">Type</th><th>Description</th></tr></thead><tbody><tr><td data-label="Property" data-mono="true"><span class="required">photos</span></td><td data-label="Type" data-mono="true">Photo[]</td><td data-label="Description"><p>An array of photos to display in the photo album. 32See <a href="#Photo">Photo</a> for details.</p></td></tr><tr><td data-label="Property" data-mono="true">spacing</td><td data-label="Type" data-mono="true">number | function</td><td data-label="Description"><div><p>Spacing between images (similar to CSS grid gap).</p><p>Default responsive value:</p><ul><li>20, when container width >= 1200</li><li>15, when container width >= 600 and < 1200</li><li>10, when container width >
32= 300 and < 600</li><li>5, when container width < 300</li></ul></div></td></tr><tr><td data-label="Property" data-mono="true">padding</td><td data-label="Type" data-mono="true">number | function</td><td data-label="Description"><div><p>Padding around each image.</p><p>Default value: <span class="font-mono">0</span></p></div></td></tr><tr><td data-label="Property" data-mono="true">onClick</td><td data-label="Type" data-mono="true">function</td><td data-label="Description"><div>Photo click callback. See <a href="#ClickHandler">Click Handler</a> for details.</div></td></tr><tr><td data-label="Property" data-mono="true">sizes</td><td data-label="Type" data-mono="true">object</td><td data-label="Description"><p>Photo album container width in various viewports. See <a href="#Sizes">Sizes</a> 33for details.</p></td></tr><tr><td data-label="Property" data-mono="true">breakpoints</td><td data-label="Type" data-mono="true">number[]</td><td data-label="Description"><p>Photo album layout breakpoints. See <a href="#Breakpoints">Breakpoints</a> for details.</p></td></tr><tr><td data-label="Property" data-mono="true">componentsProps</td><td data-label="Type" data-mono="true">object | function</td><td data-label="Description"><p>Additional HTML attributes to be passed to the rendered elements. 34See <a href="#ComponentsProps">Components Props</a> for details.</p></td></tr><tr><td data-label="Property" data-mono="true">render</td><td data-label="Type" data-mono="true">object | function</td><td data-label="Description"><p>Custom render functions. See <a href="#RenderFunctions">Render Functions</a> for details.</p></td></tr><tr><td data-label="Property" data-mono="true">defaultContainerWidth</td><td data-label="Type" data-mono="true">number</td><td data-label="Description"><p>The default container width in server-side rendering (SSR). 35See <a href="#Server-SideRendering(SSR)_DefaultContainerWidth">Default Container Width</a> for details.</p></td></tr><tr><td data-label="Property" data-mono="true">skeleton</td><td data-label="Type" data-mono="true">ReactNode</td><td data-label="Description"><p>Fallback skeleton in SSR. 36See <a href="#Server-SideRendering(SSR)_Skeleton">Skeleton</a> for details.</p></td></tr></tbody></table> 37<h2 id="RowsPhotoAlbumProps">RowsPhotoAlbum Props<a href="#RowsPhotoAlbumProps" title="Direct link to RowsPhotoAlbum Props" aria-label="Direct link to RowsPhotoAlbum Props"></a></h2> 38<table class="docs"><thead><tr><th data-mono="true">Property</th><th data-mono="true">Type</th><th>Description</th></tr></thead><tbody><tr><td data-label="Property" data-mono="true">targetRowHeight</td><td data-label="Type" data-mono="true">number | function</td><td data-label="Description"><div><p>Target row height.</p><p>Default responsive value:</p><ul><li>(container width) / 5, when container width >= 1200</li><li>(container width) / 4, when container width >= 600 and < 1200</li><li>(container width) / 5, when container width >= 300 and < 600</li><li>(container width) / 2, when container width < 300</li></ul></div></td></tr><tr><td data-label="Property" data-mono="true">rowConstraints</td><td data-label="Type" data-mono="true">object | function</td><td data-label="Description"><div><p>Additional row constraints.</p><ul><li><code>minPhotos</code> - minimum number of photos per row</li><li><code>maxPhotos</code> - maximum number of photos per row</li><li><code>singleRowMaxHeight</code> - maximum row height when there are not enough 39photos to fill more than one row</li></ul></div></td></tr></tbody></table> 40<p>Usage example:</p> 41<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> 42 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 43 <span class="token attr-name">targetRowHeight</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">150</span><span class="token punctuation">}</span></span> 44 <span class="token attr-name">rowConstraints</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> singleRowMaxHeight<span class="token operator">:</span> <span class="token number">250</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> 45<span class="token punctuation">/></span></span> 46</code></pre> 47<h2 id="ColumnsPhotoAlbumProps">ColumnsPhotoAlbum Props<a href="#ColumnsPhotoAlbumProps" title="Direct link to ColumnsPhotoAlbum Props" aria-label="Direct link to ColumnsPhotoAlbum Props"></a></h2> 48<table class="docs"><thead><tr><th data-mono="true">Property</th><th data-mono="true">Type</th><th>Description</th></tr></thead><tbody><tr><td data-label="Property" data-mono="true">columns</td><td data-label="Type" data-mono="true">number | function</td><td data-label="Description"><div><p>Number of columns.</p><p>Default responsive value:</p><ul><li>5, when container width >= 1200</li><li>4, when container width >= 600 and < 1200</li><li>3, when container width >
48= 300 and < 600</li><li>2, when container width < 300</li></ul></div></td></tr></tbody></table> 49<p>Usage example:</p> 50<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ColumnsPhotoAlbum</span></span> <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> 51</code></pre> 52<h2 id="MasonryPhotoAlbumProps">MasonryPhotoAlbum Props<a href="#MasonryPhotoAlbumProps" title="Direct link to MasonryPhotoAlbum Props" aria-label="Direct link to MasonryPhotoAlbum Props"></a></h2> 53<p><code>MasonryPhotoAlbum</code> accepts <code>columns</code> prop identical to the one supported by the 54<a href="#ColumnsPhotoAlbumProps">ColumnsPhotoAlbum</a>.</p> 55<p>Usage example:</p> 56<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MasonryPhotoAlbum</span></span> <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> 57</code></pre> 58<h2 id="PhotoAlbumProps">PhotoAlbum Props<a href="#PhotoAlbumProps" title="Direct link to PhotoAlbum Props" aria-label="Direct link to PhotoAlbum Props"></a></h2> 59<p>The aggregate <code>PhotoAlbum</code> component supports all relevant props that correspond 60to the selected layout.</p> 61<table class="docs"><thead><tr><th data-mono="true">Property</th><th data-mono="true">Type</th><th>Description</th></tr></thead><tbody><tr><td data-label="Property" data-mono="true"><span class="required">layout</span></td><td data-label="Type" data-mono="true">"columns" | "rows" | "masonry"</td><td data-label="Description">Photo album layout type.</td></tr></tbody></table> 62<p>Usage example:</p> 63<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">PhotoAlbum</span></span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rows<span class="token punctuation">"</span></span> <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> <span class="token attr-name">targetRowHeight</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">150</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> 64</code></pre> 65<h2 id="Photo">Photo<a href="#Photo" title="Direct link to Photo" aria-label="Direct link to Photo"></a></h2> 66<table class="docs"><thead><tr><th data-mono="true">Property</th><th data-mono="true">Type</th><th>Description</th></tr></thead><tbody><tr><td data-label="Property" data-mono="true"><span class="required">src</span></td><td data-label="Type" data-mono="true">string</td><td data-label="Description">Image source.</td></tr><tr><td data-label="Property" data-mono="true"><span class="required">width</span></td><td data-label="Type" data-mono="true">number</td><td data-label="Description">Image width in pixels.</td></tr><tr><td data-label="Property" data-mono="true"><span class="required">height</span></td><td data-label="Type" data-mono="true">number</td><td data-label="Description">Image height in pixels.</td></tr><tr><td data-label="Property" data-mono="true">key</td><td data-label="Type" data-mono="true">string</td><td data-label="Description"><div>React <code>key</code> attribute.</div></td></tr><tr><td data-label="Property" data-mono="true">alt</td><td data-label="Type" data-mono="true">string</td><td data-label="Description"><div>Image <code>alt</code> attribute.</div></td></tr><tr><td data-label="Property" data-mono="true">title</td><td data-label="Type" data-mono="true">string</td><td data-label="Description"><div>Image <code>title</code> attribute.</div></td></tr><tr><td data-label="Property" data-mono="true">href</td><td data-label="Type" data-mono="true">string</td><td data-label="Description">Image link URL.</td></tr><tr><td data-label="Property" data-mono="true">label</td><td data-label="Type" data-mono="true">string</td><td data-label="Description">ARIA label for the link and button elements.</td></tr><tr><td data-label="Property" data-mono="true">srcSet</td><td data-label="Type" data-mono="true"><p>{<br/> 67Â Â src:Â string;<br/> 68Â Â width:Â number;<br/> 69Â Â height:Â number;<br/> 70}[]</p></td><td data-label="Description"><div><p>Optional array of alternative images to be included in the <code>srcset</code> attribute.</p><p>All images in a given <code>Photo</code> object must be of the same aspect ratio.</p></div></td></tr></tbody></table> 71<p>You can also provide custom photo attributes and access them in the render 72functions.</p> 73<h2 id="ClickHandler">Click Handler<a href="#ClickHandler" title="Direct link to Click Handler" aria-label="Direct link to Click Handler"></a></h2> 74<p>
74You can add interactive behavior by providing the <code>onClick</code> callback.</p> 75<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> 76 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 77 <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span> index <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 78 <span class="token function">openLightbox</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span> 79 <span class="token punctuation">}</span><span class="token punctuation">}</span></span> 80<span class="token punctuation">/></span></span> 81</code></pre> 82<p>The callback function accepts a single parameter with the following props:</p> 83<table class="docs"><thead><tr><th data-mono="true">Property</th><th data-mono="true">Type</th><th>Description</th></tr></thead><tbody><tr><td data-label="Property" data-mono="true">index</td><td data-label="Type" data-mono="true">number</td><td data-label="Description"><div>Photo index in the original <code>photos</code> array.</div></td></tr><tr><td data-label="Property" data-mono="true">photo</td><td data-label="Type" data-mono="true">Photo</td><td data-label="Description">Photo object.</td></tr><tr><td data-label="Property" data-mono="true">event</td><td data-label="Type" data-mono="true">MouseEvent</td><td data-label="Description">Corresponding mouse event.</td></tr></tbody></table> 84<h2 id="ResponsiveProps">Responsive Props<a href="#ResponsiveProps" title="Direct link to Responsive Props" aria-label="Direct link to Responsive Props"></a></h2> 85<p><a href="/">React Photo Album</a> accepts various props as responsive parameters.</p> 86<p>Responsive props can be provided either as a hard-coded value:</p> 87<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ColumnsPhotoAlbum</span></span> <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> 88</code></pre> 89<p>or as a function of container width:</p> 90<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ColumnsPhotoAlbum</span></span> 91 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 92 <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>containerWidth<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 93 <span class="token keyword">if</span> <span class="token punctuation">(</span>containerWidth <span class="token operator"><</span> <span class="token number">400</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">2</span><span class="token punctuation">;</span> 94 <span class="token keyword">if</span> <span class="token punctuation">(</span>containerWidth <span class="token operator"><</span> <span class="token number">800</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">3</span><span class="token punctuation">;</span> 95 <span class="token keyword">return</span> <span class="token number">4</span><span class="token punctuation">;</span> 96 <span class="token punctuation">}</span><span class="token punctuation">}</span></span> 97<span class="token punctuation">/></span></span> 98</code></pre> 99<h2 id="ComponentsProps">Components Props<a href="#ComponentsProps" title="Direct link to Components Props" aria-label="Direct link to Components Props"></a></h2> 100<p>You can pass additional HTML attributes to the rendered elements through the 101<code>componentsProps</code> parameter.</p> 102<table class="docs"><thead><tr><th data-mono="true">Property</th><th data-mono="true">Type</th><th>Description</th></tr></thead><tbody><tr><td data-label="Property" data-mono="true">container</td><td data-label="Type" data-mono="true">ComponentProps<"div"></td><td data-label="Description"><div>Additional HTML attributes for the outer <code>div</code> container.</div></td></tr><tr><td data-label="Property" data-mono="true">track</td><td data-label="Type" data-mono="true">ComponentProps<"div"></td><td data-label="Description"><div>Additional HTML attributes for the row / column <code>div</code> containers.</div></td></tr><tr><td data-label="Property" data-mono="true">wrapper</td><td data-label="Type" data-mono="true">ComponentProps<"div"></td><td data-label="Description"><div>Additional HTML attributes for the image <code>div</code> wrapper.</div></td></tr><tr><td data-label="Property" data-mono="true">link</td><td data-label="Type" data-mono="true">ComponentProps<"a"></td><td data-label="Description"><div>Additional HTML attributes for the photo <code>a</code> link.</div></td></tr><tr><td data-label="Property" data-mono="true">button</td><td data-label="Type" data-mono="true">ComponentProps<"button"></td><td data-label="Description"><div>Additional HTML attributes for the photo <code>button</code> element.</div></td></tr><tr><td data-label="Property" data-mono="true">image</td><td data-label="Type" data-mono="true">ComponentProps<"img"></td><td data-label="Description"><div><p>Additional HTML attributes for the photo <code>img</code> element.</p><p>Default: <span class="font-mono">{ loading: "lazy", decoding: "async"}</span></p></div></td></tr></tbody></table> 103<p>Usage example:</p> 104<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> 105 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 106 <span class="token attr-name">componentsProps</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>containerWidth<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
107 image<span class="token operator">:</span> <span class="token punctuation">{</span> loading<span class="token operator">:</span> <span class="token punctuation">(</span>containerWidth <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">600</span> <span class="token operator">?</span> <span class="token string">"eager"</span> <span class="token operator">:</span> <span class="token string">"lazy"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> 108 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> 109<span class="token punctuation">/></span></span> 110</code></pre> 111<h2 id="RenderFunctions">Render Functions<a href="#RenderFunctions" title="Direct link to Render Functions" aria-label="Direct link to Render Functions"></a></h2> 112<p><a href="/">React Photo Album</a> allows you to customize all rendered elements by 113supplying your own custom render functions. Each render function provides the 114default element's props as a first parameter. These typically include <code>style</code> 115and <code>className</code> attributes the default implementation requires.</p> 116<table class="docs"><thead><tr><th data-mono="true">Property</th><th data-mono="true">Type</th><th>Description</th></tr></thead><tbody><tr><td data-label="Property" data-mono="true">container</td><td data-label="Type" data-mono="true">(props) => ReactNode</td><td data-label="Description"><p>Render custom container. 117See <a href="#RenderFunctions_Container">Container</a> for details.</p></td></tr><tr><td data-label="Property" data-mono="true">track</td><td data-label="Type" data-mono="true">(props) => ReactNode</td><td data-label="Description"><p>Render custom row / column container. 118See <a href="#RenderFunctions_Track">Track</a> for details.</p></td></tr><tr><td data-label="Property" data-mono="true">wrapper</td><td data-label="Type" data-mono="true">(props, context) => ReactNode</td><td data-label="Description"><p>Render custom image wrapper. 119See <a href="#RenderFunctions_Wrapper">Wrapper</a> for details.</p></td></tr><tr><td data-label="Property" data-mono="true">link</td><td data-label="Type" data-mono="true">(props, context) => ReactNode</td><td data-label="Description"><p>Render custom link element. 120See <a href="#RenderFunctions_Link">Link</a> for details.</p></td></tr><tr><td data-label="Property" data-mono="true">button</td><td data-label="Type" data-mono="true">(props, context) => ReactNode</td><td data-label="Description"><p>Render custom button element. 121See <a href="#RenderFunctions_Button">Button</a> for details.</p></td></tr><tr><td data-label="Property" data-mono="true">image</td><td data-label="Type" data-mono="true">(props, context) => ReactNode</td><td data-label="Description"><p>Render custom image element. 122See <a href="#RenderFunctions_Image">Image</a> for details.</p></td></tr><tr><td data-label="Property" data-mono="true">extras</td><td data-label="Type" data-mono="true">(props, context) => ReactNode</td><td data-label="Description"><p>Render custom markup immediately after each image. 123See <a href="#RenderFunctions_Extras">Extras</a> for details.</p></td></tr><tr><td data-label="Property" data-mono="true">photo</td><td data-label="Type" data-mono="true">(props, context) => ReactNode</td><td data-label="Description"><p>Render custom photo. 124See <a href="#RenderFunctions_Photo">Photo</a> for details.</p></td></tr></tbody></table> 125<p>When applicable, the second parameter represents the photo rendering context.</p> 126<table class="docs"><thead><tr><th data-mono="true">Property</th><th data-mono="true">Type</th><th>Description</th></tr></thead><tbody><tr><td data-label="Property" data-mono="true">photo</td><td data-label="Type" data-mono="true">Photo</td><td data-label="Description">Photo object.</td></tr><tr><td data-label="Property" data-mono="true">index</td><td data-label="Type" data-mono="true">number</td><td data-label="Description"><div>Photo index in the original <code>photos</code> array.</div></td></tr><tr><td data-label="Property" data-mono="true">width</td><td data-label="Type" data-mono="true">number</td><td data-label="Description">Rendered photo width in pixels.</td></tr><tr><td data-label="Property" data-mono="true">height</td><td data-label="Type" data-mono="true">number</td><td data-label="Description">Rendered photo height in pixels.</td></tr></tbody></table> 127<h3 id="RenderFunctions_Container">Container<a href="#RenderFunctions_Container" title="Direct link to Container" aria-label="Direct link to Container"></a></h3> 128<p>You can customize the photo album <code>div</code> container through the <code>render.container</code> 129prop. Your implementation must forward the <code>ref</code> attribute to the underlying 130container element.</p> 131<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> 132 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 133 <span class="token attr-name">render</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> 134 <span class="token function-variable function">container</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> ref<span class="token punctuation">,</span> <span class="token operator">...</span>rest <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>rest<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> 135 <span class="token punctuation">}</span><span class="token punctuation">}</span></span> 136<span class="token punctuation">/></span></span> 137</code></pre> 138<h3 id="RenderFunctions_Track">Track<a href="#RenderFunctions_Track" title="Direct link to Track" aria-label="Direct link to Track"></a></h3> 139<p>You can customize the row / column <code>div</code> containers through the <code>render.track</code> 140prop. This is not common.</p> 141<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> 142 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 143 <span class="token attr-name">render</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> 144 <span class="token function-variable function">track</span><span class="token operator">:</span> <span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> 145 <span class="token punctuation">}</span><span class="token punctuation">}</span></span> 146<span class="token punctuation">/></span></span> 147</code></pre> 148<h3 id="RenderFunctions_Wrapper">Wrapper<a href="#RenderFunctions_Wrapper" title="Direct link to Wrapper" aria-label="Direct link to Wrapper"></a></h3> 149<p>You can customize the image wrapper through the <code>render.wrapper</code> prop. This 150wrapper is rendered only when photos are not clickable (there is no <code>href</code> photo 151prop and no <code>onClick</code> callback). This is not common.</p> 152<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> 153 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 154 <span class="token attr-name">render</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> 155 <span class="token function-variable function">wrapper</span><span class="token operator">:</span> <span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> 156 <span class="token punctuation">}</span><span class="token punctuation">}</span></span> 157<span class="token punctuation">/></span></span> 158</code></pre> 159<h3 id="RenderFunctions_Link">Link<a href="#RenderFunctions_Link" title="Direct link to Link" aria-label="Direct link to Link"></a></h3> 160<p>A link element is rendered when a photo has an <code>href</code> attribute. You can provide 161your own link implementation through the <code>render.link</code> prop.</p> 162<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> 163 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 164 <span class="token attr-name">render</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> 165 <span class="token function-variable function">link</span><span class="token operator">:</span> <span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> 166 <span class="token punctuation">}</span><span class="token punctuation">}</span></span> 167<span class="token punctuation">/></span></span> 168</code></pre> 169<h3 id="RenderFunctions_Button">Button<a href="#RenderFunctions_Button" title="Direct link to Button" aria-label="Direct link to Button"></a></h3> 170<p>A button element is rendered when the photo album has an <code>onClick</code> callback. You 171can provide your own button implementation through the <code>render.button</code> prop.</p> 172<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> 173 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 174 <span class="token attr-name">render</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> 175 <span class="token function-variable function">button</span><span class="token operator">:</span> <span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> 176 <span class="token punctuation">}</span><span class="token punctuation">}</span></span> 177<span class="token punctuation">/></span></span> 178</code></pre> 179<h3 id="RenderFunctions_Image">Image<a href="#RenderFunctions_Image" title="Direct link to Image" aria-label="Direct link to Image"></a></h3> 180<p>You can provide your own image implementation through the <code>render.image</code> prop.</p> 181<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> 182 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 183 <span class="token attr-name">render</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> 184 <span class="token function-variable function">image</span><span class="token operator">:</span> <span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> 185 <span class="token punctuation">}</span><span class="token punctuation">}</span></span> 186<span class="token punctuation">/></span></span> 187</code></pre> 188<h3 id="RenderFunctions_Extras">Extras<a href="#RenderFunctions_Extras" title="Direct link to Extras" aria-label="Direct link to Extras"></a></h3> 189<p>You can render custom elements alongside each photo. This can be useful for 190rendering interactive icons with <code>position: absolute</code>.</p> 191<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> 192 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 193 <span class="token attr-name">render</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> 194 <span class="token function-variable function">extras</span><span class="token op
194erator">:</span> <span class="token punctuation">(</span>_<span class="token punctuation">,</span> <span class="token punctuation">{</span> photo<span class="token punctuation">,</span> index <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 195 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">FavoriteIcon</span></span> <span class="token attr-name">photo</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photo<span class="token punctuation">}</span></span> <span class="token attr-name">index</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> 196 <span class="token punctuation">)</span><span class="token punctuation">,</span> 197 <span class="token punctuation">}</span><span class="token punctuation">}</span></span> 198<span class="token punctuation">/></span></span> 199</code></pre> 200<h3 id="RenderFunctions_Photo">Photo<a href="#RenderFunctions_Photo" title="Direct link to Photo" aria-label="Direct link to Photo"></a></h3> 201<p>This is the render function that completely overrides the default <code>wrapper</code>, 202<code>link</code>, <code>button</code>, <code>image</code>, and <code>extras</code> render functions. The only prop provided 203in the first argument is the <code>onClick</code> callback.</p> 204<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> 205 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 206 <span class="token attr-name">render</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> 207 <span class="token function-variable function">photo</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> onClick <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> photo<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> 208 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CustomPhoto</span></span> 209 <span class="token attr-name">photo</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photo<span class="token punctuation">}</span></span> 210 <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>width<span class="token punctuation">}</span></span> 211 <span class="token attr-name">height</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>height<span class="token punctuation">}</span></span> 212 <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onClick<span class="token punctuation">}</span></span>
213 <span class="token punctuation">/></span></span> 214 <span class="token punctuation">)</span><span class="token punctuation">,</span> 215 <span class="token punctuation">}</span><span class="token punctuation">}</span></span> 216<span class="token punctuation">/></span></span> 217</code></pre> 218<h2 id="Breakpoints">Breakpoints<a href="#Breakpoints" title="Direct link to Breakpoints" aria-label="Direct link to Breakpoints"></a></h2> 219<p>By default, <a href="/">React Photo Album</a> re-calculates its layout every time its 220container width changes. For example, the layout may be re-calculated dozens of 221times during a browser window resize. If this behavior is undesired, you can 222avoid it by providing the <code>breakpoints</code> prop (e.g., 223<span class="font-mono">[300, 600, 1200]</span>). When the <code>breakpoints</code> 224parameter is defined, <a href="/">React Photo Album</a> calculates the layout only once per 225the breakpoint interval.</p> 226<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> <span class="token attr-name">breakpoints</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">600</span><span class="token punctuation">,</span> <span class="token number">1200</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> 227</code></pre> 228<h2 id="Sizes">Sizes<a href="#Sizes" title="Direct link to Sizes" aria-label="Direct link to Sizes"></a></h2> 229<p>Photo album components automatically generate <code>sizes</code> and <code>srcset</code> image 230attributes when photo objects contain a <code>srcSet</code> array. By default, 231<a href="/">React Photo Album</a> assumes that the photo album utilizes approximately 232<span class="font-mono">100vw</span> of the page width. If that's not the case, 233you can improve the performance of your responsive images by describing your 234photo album size in different viewports.</p> 235<p>For example, this website uses the following <code>sizes</code> attribute to account for 236the content container padding and the left-hand side navigation menu:</p> 237<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> 238 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 239 <span class="token attr-name">sizes</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> 240 size<span class="token operator">:</span> <span class="token string">"992px"</span><span class="token punctuation">,</span> 241 sizes<span class="token operator">:</span> <span class="token punctuation">[</span> 242 <span class="token punctuation">{</span> viewport<span class="token operator">:</span> <span class="token string">"(max-width: 767px)"</span><span class="token punctuation">,</span> size<span class="token operator">:</span> <span class="token string">"calc(100vw - 32px)"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> 243 <span class="token punctuation">{</span> viewport<span class="token operator">:</span> <span class="token string">"(max-width: 1279px)"</span><span class="token punctuation">,</span> size<span class="token operator">:</span> <span class="token string">"calc(100vw - 288px)"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> 244 <span class="token punctuation">]</span><span class="token punctuation">,</span> 245 <span class="token punctuation">}</span><span class="token punctuation">}</span></span> 246<span class="token punctuation">/></span></span> 247</code></pre> 248<h2 id="StylingFocusIndicators">Styling Focus Indicators<a href="#StylingFocusIndicators" title="Direct link to Styling Focus Indicators" aria-label="Direct link to Styling Focus Indicators"></a></h2> 249<p><a href="/">React Photo Album</a> does not provide an opinionated styling for keyboard 250focus indicators, so buttons and links are styled with browser-default focus 251indicator styles. You can implement your own styles to match your website 252design. Here is an example you can use as a starting point.</p> 253<pre><code class="language-css"><span class="token selector">.react-photo-album--link:focus-visible, 254.react-photo-album--button:focus-visible</span> <span class="token punctuation">{</span> 255 <span class="token property">outline</span><span class="token punctuation">:</span> 9px double white<span class="token punctuation">;</span> 256 <span class="token property">
256box-shadow</span><span class="token punctuation">:</span> 0 0 0 6px black<span class="token punctuation">;</span> 257<span class="token punctuation">}</span> 258 259<span class="token atrule"><span class="token rule">@supports</span> <span class="token keyword">not</span> <span class="token function">selector</span><span class="token punctuation">(</span><span class="token selector-function-argument selector">:focus-visible</span><span class="token punctuation">)</span></span> <span class="token punctuation">{</span> 260 <span class="token selector">.react-photo-album--link:focus, 261 .react-photo-album--button:focus</span> <span class="token punctuation">{</span> 262 <span class="token property">outline</span><span class="token punctuation">:</span> 9px double white<span class="token punctuation">;</span> 263 <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 0 6px black<span class="token punctuation">;</span> 264 <span class="token punctuation">}</span> 265<span class="token punctuation">}</span> 266</code></pre> 267<h2 id="InfiniteScroll">Infinite Scroll<a href="#InfiniteScroll" title="Direct link to Infinite Scroll" aria-label="Direct link to Infinite Scroll"></a></h2> 268<p>The library provides <code>InfiniteScroll</code> component that you can use to implement an 269infinite scroll feature in your app.</p> 270<pre><code class="language-tsx"><span class="token keyword">import</span> InfiniteScroll <span class="token keyword">from</span> <span class="token string">"react-photo-album/scroll"</span><span class="token punctuation">;</span> 271</code></pre> 272<table class="docs"><thead><tr><th data-mono="true">Property</th><th data-mono="true">Type</th><th>Description</th></tr></thead><tbody><tr><td data-label="Property" data-mono="true"><span class="required">children</span></td><td data-label="Type" data-mono="true">ReactElement</td><td data-label="Description">The photo album component, which must be the only child.</td></tr><tr><td data-label="Property" data-mono="true"><span class="required">fetch</span></td><td data-label="Type" data-mono="true">(index: number) => Promise<Photo[] | null></td><td data-label="Description"><p>Photo fetcher. Resolve the promise with <code>null</code> to indicate the end of 273the stream. The promise must always settle; implement timeouts and 274cancellation inside the callback as needed.</p></td></tr><tr><td data-label="Property" data-mono="true">photos</td><td data-label="Type" data-mono="true">Photo[]</td><td data-label="Description">Initial photos (optional).</td></tr><tr><td data-label="Property" data-mono="true">onClick</td><td data-label="Type" data-mono="true">({ photos, photo, index, event }) => void</td><td data-label="Description"><p>Photo click callback. The <code>photos</code> parameter represents a flat array of 275all fetched photos.</p></td></tr><tr><td data-label="Property" data-mono="true">retries</td><td data-label="Type" data-mono="true">number</td><td data-label="Description"><div><p>Retry attempts.</p><p>Default value: <span class="font-mono">0</span></p></div></td></tr><tr><td data-label="Property" data-mono="true">singleton</td><td data-label="Type" data-mono="true">boolean</td><td data-label="Description">Use a single photo album component (masonry layout).</td></tr><tr><td data-label="Property" data-mono="true">scrollContainer</td><td data-label="Type" data-mono="true">() => HTMLElement | null</td><td data-label="Description"><p>The nearest scrollable ancestor other than the viewport.</p></td></tr><tr><td data-label="Property" data-mono="true">fetchRootMargin</td><td data-label="Type" data-mono="true">string</td><td data-label="Description"><div><p>Fetcher <code>IntersectionObserver</code> root margin setting.</p><p>Default value: <span class="font-mono">800px</span></p></div></td></tr><tr><td data-label="Property" data-mono="true">offscreenRootMargin</td><td data-label="Type" data-mono="true">string</td><td data-label="Description"><div><p>Offscreen <code>IntersectionObserver</code> root margin setting.</p><p>Default value: <span class="font-mono">2000px</span></p></div></td></tr><tr><td data-label="Property" data-mono="true">error</td><td data-label="Type" data-mono="true">ReactNode</td><td data-label="Description">Markup to display when an error occurs.</td></tr><tr><td data-label="Property" data-mono="true">loading</td><td data-label="Type" data-mono="true">ReactNode</td><td data-label="Description">Markup to display while fetching additional photos.</td></tr><tr><td data-label="Property" data-mono="true">finished</td><td data-label="Type" data-mono="true">ReactNode</td><td data-label="Description">Markup to display when no more photos are available.</td></tr></tbody></table> 276<p>In singleton mode (masonry layout), custom <code>render.photo</code> functions must forward 277<code>ref</code> to the underlying DOM node. Without <code>ref</code> forwarding, the offscreen 278optimization is silently disabled and photos always render at full fidelity.</p> 279<h3 id="InfiniteScroll_RowsLayoutWithInfiniteScroll">Rows Layout With Infinite Scroll<a href="#InfiniteScroll_RowsLayoutWithInfiniteScroll" title="Direct link to Rows Layout With Infinite Scroll" aria-label="Direct link to Rows Layout With Infinite Scroll"></a></h3> 280<pre><code class="language-tsx"><span class="token keyword">
280import</span> <span class="token punctuation">{</span> RowsPhotoAlbum <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-photo-album"</span><span class="token punctuation">;</span> 281<span class="token keyword">import</span> InfiniteScroll <span class="token keyword">from</span> <span class="token string">"react-photo-album/scroll"</span><span class="token punctuation">;</span> 282<span class="token keyword">import</span> <span class="token string">"react-photo-album/rows.css"</span><span class="token punctuation">;</span> 283 284<span class="token comment">// ...</span> 285 286<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Gallery</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 287 <span class="token keyword">return</span> <span class="token punctuation">(</span> 288 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">InfiniteScroll</span></span> <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>initialPhotos<span class="token punctuation">}</span></span> <span class="token attr-name">fetch</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>fetchPhotos<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"> 289 <RowsPhotoAlbum 290 photos=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token plain-text"> 291 spacing=</span><span class="token punctuation">{</span><span class="token number">20</span><span class="token punctuation">}</span><span class="token plain-text"> 292 componentsProps=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> container<span class="token operator">:</span> <span class="token punctuation">{</span> style<span class="token operator">:</span> <span class="token punctuation">{</span> marginBottom<span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token plain-text"> 293 /> 294 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">InfiniteScroll</span></span><span class="token punctuation">></span></span> 295 <span class="token punctuation">)</span><span class="token punctuation">;</span> 296<span class="token punctuation">}</span> 297</code></pre> 298<h3 id="InfiniteScroll_MasonryLayoutWithInfiniteScroll">Masonry Layout With Infinite Scroll<a href="#InfiniteScroll_MasonryLayoutWithInfiniteScroll" title="Direct link to Masonry Layout With Infinite Scroll" aria-label="Direct link to Masonry Layout With Infinite Scroll"></a></h3> 299<pre><code class="language-tsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> MasonryPhotoAlbum <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-photo-album"</span><span class="token punctuation">;</span> 300<span class="token keyword">import</span> InfiniteScroll <span class="token keyword">from</span> <span class="token string">"react-photo-album/scroll"</span><span class="token punctuation">;</span> 301<span class="token keyword">import</span> <span class="token string">"react-photo-album/masonry.css"</span><span class="token punctuation">;</span> 302 303<span class="token comment">
303// ...</span> 304 305<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Gallery</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 306 <span class="token keyword">return</span> <span class="token punctuation">(</span> 307 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">InfiniteScroll</span></span> <span class="token attr-name">singleton</span> <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>initialPhotos<span class="token punctuation">}</span></span> <span class="token attr-name">fetch</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>fetchPhotos<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"> 308 <MasonryPhotoAlbum 309 photos=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token plain-text"> 310 spacing=</span><span class="token punctuation">{</span><span class="token number">20</span><span class="token punctuation">}</span><span class="token plain-text"> 311 componentsProps=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> container<span class="token operator">:</span> <span class="token punctuation">{</span> style<span class="token operator">:</span> <span class="token punctuation">{</span> marginBottom<span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token plain-text"> 312 /> 313 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">InfiniteScroll</span></span><span class="token punctuation">></span></span> 314 <span class="token punctuation">)</span><span class="token punctuation">;</span> 315<span class="token punctuation">}</span> 316</code></pre> 317<h3 id="InfiniteScroll_ColumnsLayoutWithInfiniteScroll">Columns Layout With Infinite Scroll<a href="#InfiniteScroll_ColumnsLayoutWithInfiniteScroll" title="Direct link to Columns Layout With Infinite Scroll" aria-label="Direct link to Columns Layout With Infinite Scroll"></a></h3> 318<p>Columns layout is not a good fit for the infinite scroll feature.</p> 319<h2 id="Server-SideRendering(SSR)">Server-Side Rendering (SSR)<a href="#Server-SideRendering(SSR)" title="Direct link to Server-Side Rendering (SSR)" aria-label="Direct link to Server-Side Rendering (SSR)"></a></h2> 320<p>By default, <a href="/">React Photo Album</a> produces an empty markup in SSR because the 321actual container width is usually unknown during server-side rendering. This 322default behavior causes content layout shift after hydration. As a workaround, 323you can specify the <code>defaultContainerWidth</code> prop to enable photo album markup 324rendering in SSR. However, that will likely result in the photo album layout 325shift once the photo album re-calculates its layout on the client. With this 326being said, there isn't a perfect solution for SSR, but there are several 327options to choose from, depending on your use case.</p> 328<h3 id="Server-SideRendering(SSR)_DefaultContainerWidth">Default Container Width<a href="#Server-SideRendering(SSR)_DefaultContainerWidth" title="Direct link to Default Container Width" aria-label="Direct link to Default Container Width"></a></h3> 329<p>To render photo album markup on the server, you can specify the 330<code>defaultContainerWidth</code> value. It is a perfect SSR solution if your photo album 331has a constant width in all viewports (e.g., an image picker in a fixed-size 332sidebar). However, if the client-side photo album width doesn't match the 333<code>defaultContainerWidth</code>, you are almost guaranteed to see a layout shift after 334hydration.</p> 335<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> <span class="token attr-name">defaultContainerWidth</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">800</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> 336</code></pre> 337<h3 id="Server-SideRendering(SSR)_Skeleton">Skeleton<a href="#Server-SideRendering(SSR)_Skeleton" title="Direct link to Skeleton" aria-label="Direct link to Skeleton"></a></h3> 338<p>Alternatively, you can provide a fallback skeleton in the <code>skeleton</code> prop that 339will be rendered in SSR and swapped with the actual photo album markup after 340hydration. This approach allows you to reserve a blank space on the page for the 341photo album markup and avoid a flash of the below-the-fold content during 342hydration. The downside of this approach is that images don't start downloading 343until after hydration unless you manually add prefetch links to the document 344<code><head></code>.</p> 345<pre><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> 346 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 347 <span class="token attr-name">skeleton</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token operator">:</span> <span class="token string">"100%"</span><span class="token punctuation">,</span> minHeight<span class="token operator">:</span> <span class="token number">800</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span> 348<span class="token punctuation">/></span></span> 349</code></pre> 350<h3 id="Server-SideRendering(SSR)_VisibilityHidden">Visibility Hidden<a href="#Server-SideRendering(SSR)_VisibilityHidden" title="Direct link to Visibility Hidden" aria-label="Direct link to Visibility Hidden"></a></h3> 351<p>Another option is to render the photo album on the server with 352<code>visibility: hidden</code>. This way, you can avoid a flash of the below-the-fold 353content and allow the browser to start downloading images before hydration.</p> 354<pre><code class="language-tsx"><span class="token operator"><</span>RowsPhotoAlbum 355 photos<span class="token operator">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span> 356 defaultContainerWidth<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">800</span><span class="token punctuation">}</span> 357 componentsProps<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>containerWidth<span class="token punctuation">)</span> <span class="token operator">=></span> 358 containerWidth <span class="token operator">===</span> <span class="token keyword">undefined</span>
359 <span class="token operator">?</span> <span class="token punctuation">{</span> 360 container<span class="token operator">:</span> <span class="token punctuation">{</span> style<span class="token operator">:</span> <span class="token punctuation">{</span> visibility<span class="token operator">:</span> <span class="token string">"hidden"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> 361 <span class="token punctuation">}</span> 362 <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> 363 <span class="token punctuation">}</span> 364<span class="token operator">/</span><span class="token operator">></span> 365</code></pre> 366<h3 id="Server-SideRendering(SSR)_SSRComponent">SSR Component<a href="#Server-SideRendering(SSR)_SSRComponent" title="Direct link to SSR Component" aria-label="Direct link to SSR Component"></a></h3> 367<p>The ultimate zero-CLS solution requires pre-rendering multiple layouts on the 368server and displaying the correct one on the client using CSS <code>@container</code> 369queries. <a href="/">React Photo Album</a> provides <code>SSR</code> component implementing this 370approach. The downside of this approach is the overhead in SSR-generated markup 371and the hydration of multiple photo album instances on the client (which may be 372a reasonable compromise if zero CLS is a must-have requirement). You can find a 373live demo in the <a href="/examples/zero-cls-ssr">Zero CLS SSR</a> example.</p> 374<pre><code class="language-tsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> RowsPhotoAlbum <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-photo-album"</span><span class="token punctuation">;</span> 375<span class="token keyword">import</span> <span class="token constant">SSR</span> <span class="token keyword">from</span> <span class="token string">"react-photo-album/ssr"</span><span class="token punctuation">;</span> 376<span class="token keyword">import</span> <span class="token string">"react-photo-album/rows.css"</span><span class="token punctuation">;</span> 377 378<span class="token keyword">import</span> photos <span class="token keyword">from</span> <span class="token string">"./photos"</span><span class="token punctuation">;</span> 379 380<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Gallery</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 381 <span class="token keyword">return</span> <span class="token punctuation">(</span> 382 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SSR</span></span> <span class="token attr-name">breakpoints</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">600</span><span class="token punctuation">,</span> <span class="token number">900</span><span class="token punctuation">,</span> <span class="token number">1200</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"> 383 </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RowsPhotoAlbum</span></span> <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"> 384 </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SSR</span></span><span class="token punctuation">></span></span> 385 <span class="token punctuation">)</span><span class="token punctuation">;</span> 386<span class="token punctuation">}</span> 387</code></pre> 388<table class="docs"><thead><tr><th data-mono="true">Property</th><th data-mono="true">Type</th><th>Description</th></tr></thead><tbody><tr><td data-label="Property" data-mono="true"><span class="required">breakpoints</span></td><td data-label="Type" data-mono="true">number[]</td><td data-label="Description">Photo album layout breakpoints.</td></tr><tr><td data-label="Property" data-mono="true"><span class="required">children</span></td><td data-label="Type" data-mono="true">ReactElement</td><td data-label="Description">Photo album instance, which must be the only child.</td></tr><tr><td data-label="Property" data-mono="true">unstyled</td><td data-label="Type" data-mono="true">boolean</td><td data-label="Description"><p>If <code>true</code>, do not include the inline stylesheet. Use this option if you 389are using a custom styling solution (e.g., Tailwind CSS).</p></td></tr><tr><td data-label="Property" data-mono="true">classNames</td><td data-label="Type" data-mono="true"><p>{<br/> 390Â Â container?: string;<br/> 391Â Â breakpoints?: {<br/> 392Â Â Â Â [key: number]: string;<br/> 393Â Â }<br/> 394}</p></td><td data-label="Description">Custom class names for the container and the breakpoint intervals.</td></tr></tbody></table> 395<p>Please share your feedback if you have successfully used this component in your 396project or encountered any issues.</p> 397<h2 id="ServerComponent">Server Component<a href="#ServerComponent" title="Direct link to Server Component" aria-label="Direct link to Server Component"></a></h2> 398<p><a href="/">React Photo Album</a> provides a server component for rendering static photo 399albums server-side with zero client-side JS bundle (the component produces pure 400HTML markup with no client components). You can find a live demo in the 401<a href="/examples/server">Server Component</a> example.</p> 402<pre><code class="language-tsx"><span class="token keyword">
402import</span> ServerPhotoAlbum <span class="token keyword">from</span> <span class="token string">"react-photo-album/server"</span><span class="token punctuation">;</span> 403</code></pre> 404<table class="docs"><thead><tr><th data-mono="true">Property</th><th data-mono="true">Type</th><th>Description</th></tr></thead><tbody><tr><td data-label="Property" data-mono="true"><span class="required">layout</span></td><td data-label="Type" data-mono="true">"rows" | "columns" | "masonry"</td><td data-label="Description">Layout type.</td></tr><tr><td data-label="Property" data-mono="true"><span class="required">breakpoints</span></td><td data-label="Type" data-mono="true">number[]</td><td data-label="Description">Photo album layout breakpoints.</td></tr><tr><td data-label="Property" data-mono="true">unstyled</td><td data-label="Type" data-mono="true">boolean</td><td data-label="Description"><div>If <code>true</code>, do not include the inline stylesheet.</div></td></tr><tr><td data-label="Property" data-mono="true">classNames</td><td data-label="Type" data-mono="true"><p>{<br/> 405Â Â container?: string;<br/> 406Â Â breakpoints?: {<br/> 407Â Â Â Â [key: number]: string;<br/> 408Â Â }<br/> 409}</p></td><td data-label="Description">Custom class names for the container and the breakpoint intervals.</td></tr></tbody></table> 410<p>In addition to the props listed above, <code>ServerPhotoAlbum</code> supports all relevant 411props corresponding to the selected layout type except the 412<code>defaultContainerWidth</code>, <code>onClick</code>, and <code>skeleton</code>.</p> 413<h3 id="ServerComponent_ServerComponentWithDefaultStyling">Server Component With Default Styling<a href="#ServerComponent_ServerComponentWithDefaultStyling" title="Direct link to Server Component With Default Styling" aria-label="Direct link to Server Component With Default Styling"></a></h3> 414<pre><code class="language-tsx"><span class="token keyword">import</span> ServerPhotoAlbum <span class="token keyword">from</span> <span class="token string">"react-photo-album/server"</span><span class="token punctuation">;</span> 415<span class="token keyword">import</span> <span class="token string">"react-photo-album/rows.css"</span><span class="token punctuation">;</span> 416 417<span class="token comment">// ...</span> 418 419<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Gallery</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 420 <span class="token keyword">return</span> <span class="token punctuation">(</span> 421 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ServerPhotoAlbum</span></span> 422 <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rows<span class="token punctuation">"</span></span> 423 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 424 <span class="token attr-name">breakpoints</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">600</span><span class="token punctuation">,</span> <span class="token number">900</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> 425 <span class="token punctuation">/></span></span> 426 <span class="token punctuation">)</span><span class="token punctuation">;</span> 427<span class="token punctuation">}</span> 428</code></pre> 429<h3 id="ServerComponent_ServerComponentWithTailwindCSSStyling">Server Component With Tailwind CSS Styling<a href="#ServerComponent_ServerComponentWithTailwindCSSStyling" title="Direct link to Server Component With Tailwind CSS Styling" aria-label="Direct link to Server Component With Tailwind CSS Styling"></a></h3> 430<p>Here is an example of custom styling using 431<a href="https://github.com/tailwindlabs/tailwindcss-container-queries" target="_blank" rel="noreferrer noopener">@tailwindcss/container-queries</a>.</p> 432<pre><code class="language-tsx"><span class="token keyword">
432import</span> ServerPhotoAlbum <span class="token keyword">from</span> <span class="token string">"react-photo-album/server"</span><span class="token punctuation">;</span> 433<span class="token keyword">import</span> <span class="token string">"react-photo-album/rows.css"</span><span class="token punctuation">;</span> 434 435<span class="token comment">// ...</span> 436 437<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Gallery</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 438 <span class="token keyword">return</span> <span class="token punctuation">(</span> 439 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ServerPhotoAlbum</span></span> 440 <span class="token attr-name">unstyled</span> 441 <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rows<span class="token punctuation">"</span></span> 442 <span class="token attr-name">photos</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>photos<span class="token punctuation">}</span></span> 443 <span class="token attr-name">breakpoints</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">600</span><span class="token punctuation">,</span> <span class="token number">900</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> 444 <span class="token attr-name">classNames</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> 445 container<span class="token operator">:</span> <span class="token string">"@container"</span><span class="token punctuation">,</span> 446 breakpoints<span class="token operator">:</span> <span class="token punctuation">{</span> 447 <span class="token number">150</span><span class="token operator">:</span> <span class="token string">"block @[300px]:hidden"</span><span class="token punctuation">,</span> 448 <span class="token number">300</span><span class="token operator">:</span> <span class="token string">"hidden @[300px]:block @[600px]:hidden"</span><span class="token punctuation">,</span> 449 <span class="token number">600</span><span class="token operator">:</span> <span class="token string">"hidden @[600px]:block @[900px]:hidden"</span><span class="token punctuation">,</span> 450 <span class="token number">900</span><span class="token operator">:</span> <span class="token string">"hidden @[900px]:block"</span><span class="token punctuation">,</span> 451 <span class="token punctuation">}</span><span class="token punctuation">,</span> 452 <span class="token punctuation">}</span><span class="token punctuation">}</span></span> 453 <span class="token punctuation">/></span></span> 454 <span class="token punctuation">)</span><span class="token punctuation">;</span> 455<span class="token punctuation">}</span> 456</code></pre> 457<p>Please share your feedback if you have successfully used this component in your 458project or encountered any issues.</p><!--$--><!--/$--><hr class="print:hidden"/><nav aria-label="Quick links" class="flex flex-wrap gap-4 -mt-4 not-prose print:hidden"><span class="flex flex-grow justify-start"><a class="inline-flex group font-bold p-3 outline-0" href="/"><span class="group-hover:text-link-underline dark:group-hover:text-link-underline-invert mr-2">«</span><span class="link group-hover:decoration-2 group-focus-visible:decoration-2">Introduction</span></a></span><span class="flex flex-grow justify-end"><a class="inline-flex group font-bold p-3 outline-0" href="/examples"><span class="link group-hover:decoration-2 group-focus-visible:decoration-2">Examples</span><span class="group-hover:text-link-underline dark:group-hover:text-link-underline-invert ml-2">»</span></a></span></nav></main><div aria-hidden="true" class="fixed bottom-4 w-10 h10 text-2xl transition duration-200 print:hidden right-[max(1rem,_1rem_+_(100%_-_80rem)_/_2)] scale-0"><button type="button" class="not-prose relative box-border outline-0 outline-none m-0 border-0 cursor-pointer select-none align-middle no-underline hover:no-underline overflow-hidden transition duration-300 [-webkit-tap-highlight-color:transparent] p-2 shrink-0 rounded-full text-text bg-secondary hover:bg-secondary-dark shadow-fab active:shadow-fab-active" title="Scroll to Top"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="select-none fill-current w-[1em] h-[1em]">
458<path d="M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg></button></div></div>
458<script src="https://assets.react-photo-album.com/_next/static/immutable/chunks/36k8in9a291ok.js" id="_R_" async=""></script>
458<script>(self.__next_f=self.__next_f||[]).push([0])</script>
458<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[79520,[\"https://assets.react-photo-album.com/_next/static/immutable/chunks/1ty7z5-qzonhg.js\",\"https://assets.react-photo-album.com/_next/static/immutable/chunks/3-sc2wqugqoo_.js\"],\"\"]\n3:I[8044,[\"https://assets.react-photo-album.com/_next/static/immutable/chunks/1ty7z5-qzonhg.js\",\"https://assets.react-photo-album.com/_next/static/immutable/chunks/3-sc2wqugqoo_.js\"],\"default\"]\n4:I[2120,[\"https://assets.react-photo-album.com/_next/static/immutable/chunks/1ty7z5-qzonhg.js\",\"https://assets.react-photo-album.com/_next/static/immutable/chunks/3-sc2wqugqoo_.js\"],\"default\"]\na:I[68027,[\"https://assets.react-photo-album.com/_next/static/immutable/chunks/1ty7z5-qzonhg.js\",\"https://assets.react-photo-album.com/_next/static/immutable/chunks/3-sc2wqugqoo_.js\"],\"default\",1]\n:HL[\"https://assets.react-photo-album.com/_next/static/immutable/chunks/2h86bkwzmn_lt.css\",\"style\"]\n:HL[\"https://assets.react-photo-album.com/_next/static/immutable/media/83afe278b6a6bb3c-s.p.45535valc9rzk.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"https://assets.react-photo-album.com/_next/static/immutable/media/b8b552e8609c5636-s.p.1mao1hin7sitq.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n8:X\n0:{\"P\":null,\"c\":[\"\",\"documentation\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"documentation\",{\"children\":[\"__PAGE__\",{},\"$undefined\",\"$undefined\",4608]},\"$undefined\",\"$undefined\",4608]},\"$undefined\",\"$undefined\",4624],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://assets.react-photo-album.com/_next/static/immutable/chunks/2h86bkwzmn_lt.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"https://assets.react-photo-album.com/_next/static/immutable/chunks/1ty7z5-qzonhg.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"https://assets.react-photo-album.com/_next/static/immutable/chunks/3-sc2wqugqoo_.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"inter_709f7113-module__S4rG8G__variable fira_code_af5fb8ee-module__X-BCKq__variable\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"script\",null,{\"id\":\"select-theme\",\"dangerouslySetInnerHTML\":{\"__html\":\"!function(){var e,l,a,n=null===(e=(l=window).matchMedia)||void 0===e?void 0:e.call(l,\\\"(prefers-color-scheme: dark)\\\");function t(){\\\"dark\\\"===localStorage.theme||!(\\\"theme\\\"in localStorage)\u0026\u0026null!=n\u0026\u0026n.matches?document.documentElement.classList.add(\\\"dark\\\"):document.documentElement.classList.remove(\\\"dark\\\")}t(),null==n||null===(a=n.addEventListener)||void 0===a||a.call(n,\\\"change\\\",t)}();\"}}],[[\"$\",\"$L2\",null,{\"id\":\"gtag.js\",\"strategy\":\"lazyOnload\",\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-XL5341CQ1R\"}],[\"$\",\"$L2\",null,{\"id\":\"google-analytics\",\"strategy\":\"lazyOnload\",\"children\":\"window.dataLayer=window.dataLayer||[];function gtag(){window.dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-XL5341CQ1R')\"}]]]}],[\"$\",\"$L3\",null,{}],[\"$\",\"$L4\",null,{\"logo\":\"React Photo Album\",\"siteTitle\":\"React Photo Album\",\"navigation\":[{\"href\":\"/\",\"title\":\"Introduction\",\"titleOverride\":\"React Photo Album - Responsive photo gallery component for React\",\"description\":\"React Photo Album is a responsive photo gallery component for React. React Photo Album supports rows, columns, and masonry layouts.\",\"thumbnail\":\"https://images.react-photo-album.com/thumbnails/playground.cd1bf9f5.1600x1600.1600w.jpg\"},{\"href\":\"/documentation\",\"title\":\"Documentation\",\"description\":\"React Photo Album allows you to build a responsive photo gallery in React in minutes. To get started, follow the Installation and Minimal Setup Example guides, or feel free to explore the collection of CodeSandbox demos.\"},{\"href\":\"/examples\",\"title\":\"Examples\",\"description\":\"Learn how to use React Photo Album by exploring basic examples with live demos, source code, and ready-to-use code sandboxes.\",\"children\":[{\"href\":\"/examples/rows\",\"t
458itle\":\"Rows Layout\",\"description\":\"Introductory example using rows layout.\",\"thumbnail\":\"https://images.react-photo-album.com/thumbnails/rows.c2875cf5.1540x1540.1540w.jpg\"},{\"href\":\"/examples/columns\",\"title\":\"Columns Layout\",\"description\":\"Introductory example using columns layout.\",\"thumbnail\":\"https://images.react-photo-album.com/thumbnails/columns.6c8946ef.1540x1540.1540w.jpg\"},{\"href\":\"/examples/masonry\",\"title\":\"Masonry Layout\",\"description\":\"Introductory example using masonry layout.\",\"thumbnail\":\"https://images.react-photo-album.com/thumbnails/masonry.5a78159f.1540x1540.1540w.jpg\"},{\"href\":\"/examples/playground\",\"title\":\"Playground\",\"description\":\"Here is an interactive playground to test various parameters in real-time.\",\"thumbnail\":\"https://images.react-photo-album.com/thumbnails/playground.cd1bf9f5.1600x1600.1600w.jpg\"},{\"href\":\"/examples/customization\",\"title\":\"Customization\",\"description\":\"Photo album photos and container elements can be customized via custom render functions.\"},{\"href\":\"/examples/sortable-gallery\",\"title\":\"Sortable Gallery\",\"description\":\"Here is an example of a sortable gallery built with @dnd-kit. You can re-arrange photos via drag-and-drop.\",\"thumbnail\":\"https://images.react-photo-album.com/thumbnails/playground.cd1bf9f5.1600x1600.1600w.jpg\"},{\"href\":\"/examples/nextjs\",\"title\":\"Next.js Image\",\"description\":\"An example showing how to use Next.js Image component with custom renderPhoto function.\"},{\"href\":\"/examples/lightbox\",\"title\":\"Lightbox\",\"description\":\"Here is an example of a photo gallery with a lightbox. You can click any photo to open it in a lightbox. This example is built with yet-another-react-lightbox.\",\"thumbnail\":\"https://images.react-photo-album.com/thumbnails/lightbox.80f97fc7.1600x1600.1600w.jpg\"},{\"href\":\"/examples/infinite-scroll\",\"title\":\"Infinite Scroll\",\"description\":\"An example demonstrating the use of the experimental InfiniteScroll component.\"},{\"href\":\"/examples/zero-cls-ssr\",\"title\":\"Zero CLS SSR\",\"description\":\"An example demonstrating the use of the experimental SSR component that helps to achieve zero CLS in SSR.\"},{\"href\":\"/examples/server\",\"title\":\"Server Component\",\"description\":\"An example demonstrating the use of the experimental ServerPhotoAlbum component.\"}]}],\"npmLink\":\"https://www.npmjs.com/package/react-photo-album\",\"githubLink\":\"https://github.com/igordanchenko/react-photo-album\",\"layoutSize\":\"$undefined\",\"npmLinkDisplay\":\"hidden [@media(min-width:20.625rem)]:block\",\"githubLinkDisplay\":\"hidden [@media(min-width:18.75rem)]:block\",\"themeToggleDisplay\":\"hidden [@media(min-width:23.125rem)]:block\",\"children\":\"$L5\"}]]}]]}],{\"children\":[\"$L6\",{\"children\":[\"$L7\",{},null,false,null]},null,false,\"$8\"]},null,false,null],\"$L9\",false]],\"m\":\"$undefined\",\"G\":[\"$a\",[\"$Lb\"]],\"S\":true,\"h\":null,\"r\":\"$undefined\",\"s\":\"$undefined\",\"a\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"PNlk3oCrILqU2Uab1bAa0\"}\nc:I[39756,[\"https://assets.react-photo-album.com/_next/static/immutable/chunks/1ty7z5-qzonhg.js\",\"https://assets.react-photo-album.com/_next/static/immutable/chunks/3-sc2wqugqoo_.js\"],\"default\"]\nd:I[37457,[\"https://assets.react-photo-album.com/_next/static/immutable/chunks/1ty7z5-qzonhg.js\",\"https://assets.react-photo-album.com/_next/static/immutable/chunks/3-sc2wqugqoo_.js\"],\"default\"]\nf:I[97367,[\"https://assets.react-photo-album.com/_next/static/immutable/chunks/1ty7z5-qzonhg.js\",\"https://assets.react-photo-album.com/_next/static/immutable/chunks/3-sc2wqugqoo_.js\"],\"OutletBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[97367,[\"https://assets.react-photo-album.com/_next/static/immutable/chunks/1ty7z5-qzonhg.js\",\"https://assets.react-photo-album.com/_next/static/immutable/chunks/3-sc2wqugqoo_.js\"],\"ViewportBoundary\"]\n14:I[97367,[\"https://assets.react-photo-album.com/_next/static/immutable/chunks/1ty7z5-qzonhg.js\",\"https://assets.react-photo-album.com/_next/static/immutable/chunks/3-sc2wqugqoo_.js\"],\"MetadataBoundary\"]\n5:[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Ld\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"not-prose flex justify-center mt-10\",\"children\":[\"$\",\"div\",null,{\"children\":[\"$\",\"h1\",null,{\"className\":\"font-mono text-xl overflow-hidden border-r-4 border-r-secondary whitespace-nowrap my-0 mx-auto tracking-widest animate-[typewriter_1.5s_steps(30,_end),_typewriter-caret_.5s_step-end_infinite]\",\"children\":\"404, page not found.\"}]}]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]\n6:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Ld\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[\"$Le\",[[\"$\",\"script\",\"script-0\",{\"src\":\"https://assets.react-photo-album.com/_next/static/immutable/chunks/1xdqp_r9jcv98.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@11\"}]}]]}]\n9:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\nb:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://assets.react-photo-album.com/_next/static/immutable/chunks/2h86bkwzmn_lt.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n8:C\n13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#1a237e\"}]]\n16:I[27201,[\"https://assets.react-photo-album.com/_next/static/immutable/chunks/1ty7z5-qzonhg.js\",\"https://assets.react-photo-album.com/_next/static/immutable/chunks/3-sc2wqugqoo_.js\"],\"IconMark\"]\n11:null\n15:[[\"$\",\"title\",\"0\",{\"children\":\"Documentation | React Photo Album\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"React Photo Album allows you to build a responsive photo gallery in React in minutes. To get started, follow the Installation and Minimal Setup Ex
458ample guides, or feel free to explore the collection of CodeSandbox demos.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"manifest\",\"href\":\"/site.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"3\",{\"name\":\"msapplication-TileColor\",\"content\":\"#1a237e\"}],[\"$\",\"link\",\"4\",{\"rel\":\"canonical\",\"href\":\"https://react-photo-album.com/documentation\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:title\",\"content\":\"React Photo Album | Documentation\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:description\",\"content\":\"React Photo Album allows you to build a responsive photo gallery in React in minutes. To get started, follow the Installation and Minimal Setup Example guides, or feel free to explore the collection of CodeSandbox demos.\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:url\",\"content\":\"https://react-photo-album.com/documentation\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:site_name\",\"content\":\"React Photo Album\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:card\",\"content\":\"summary\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:title\",\"content\":\"React Photo Album | Documentation\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:description\",\"content\":\"React Photo Album allows you to build a responsive photo gallery in React in minutes. To get started, follow the Installation and Minimal Setup Example guides, or feel free to explore the collection of CodeSandbox demos.\"}],[\"$\",\"link\",\"14\",{\"rel\":\"icon\",\"href\":\"/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"15\",{\"rel\":\"icon\",\"href\":\"/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"16\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\",\"sizes\":\"180x180\"}],[\"$\",\"link\",\"17\",{\"rel\":\"mask-icon\",\"href\":\"/safari-pinned-tab.svg\",\"color\":\"#1a237e\"}],[\"$\",\"$L16\",\"18\",{}]]\n"])</script>
458<script>self.__next_f.push([1,"17:I[22016,[\"https://assets.react-photo-album.com/_next/static/immutable/chunks/1ty7z5-qzonhg.js\",\"https://assets.react-photo-album.com/_next/static/immutable/chunks/3-sc2wqugqoo_.js\",\"https://assets.react-photo-album.com/_next/static/immutable/chunks/1xdqp_r9jcv98.js\"],\"default\"]\ne:[[\"$\",\"h1\",null,{\"id\":\"Documentation\",\"children\":[\"Documentation\",[\"$\",\"a\",null,{\"href\":\"#Documentation\",\"title\":\"Direct link to Documentation\",\"aria-label\":\"Direct link to Documentation\"}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/\",\"prefetch\":false,\"children\":\"React Photo Album\"}],\" allows you to build a responsive React photo gallery in\\nminutes. To get started, follow the \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/#Installation\",\"prefetch\":false,\"children\":\"Installation\"}],\" and\\n\",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/#MinimalSetupExample\",\"prefetch\":false,\"children\":\"Minimal Setup Example\"}],\" guides, or feel free to explore\\nthe collection of \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/examples\",\"prefetch\":false,\"children\":\"examples\"}],\" with live demos.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Parameters marked with an asterisk (\",[\"$\",\"span\",null,{\"className\":\"required\"}],\") are required.\"]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"Prerequisites\",\"children\":[\"Prerequisites\",[\"$\",\"a\",null,{\"href\":\"#Prerequisites\",\"title\":\"Direct link to Prerequisites\",\"aria-label\":\"Direct link to Prerequisites\"}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/\",\"prefetch\":false,\"children\":\"React Photo Album\"}],\" provides four separate photo album components, depending\\non the layout you intend to use. Each component comes with its own CSS\\nstylesheet.\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"Prerequisites_RowsLayout\",\"children\":[\"Rows Layout\",[\"$\",\"a\",null,{\"href\":\"#Prerequisites_RowsLayout\",\"title\":\"Direct link to Rows Layout\",\"aria-label\":\"Direct link to Rows Layout\"}]]}],\"\\n\",[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" RowsPhotoAlbum \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/rows.css\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"Prerequisites_ColumnsLayout\",\"children\":[\"Columns Layout\",[\"$\",\"a\",null,{\"href\":\"#Prerequisites_ColumnsLayout\",\"title\":\"Direct link to Columns Layout\",\"aria-label\":\"Direct link to Columns Layout\"}]]}],\"\\n\",[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" ColumnsPhotoAlbum \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/columns.css\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"Prerequisites_MasonryLayout\",\"children\":[\"Masonry Layout\",[\"$\",\"a\",null,{\"href\":\"#Prerequisites_MasonryLayout\",\"title\":\"Direct link to Masonry Layout\",\"aria-label\":\"Direct link to Masonry Layout\"}]]}],\"\\n\",[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" MasonryPhotoAlbum \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/masonry.css\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"Prerequisites_3-in-1\",\"children\":[\"3-in-1\",[\"$\",\"a\",null,{\"href\":\"#Prerequisites_3-in-1\",\"title\":\"Direct link to 3-in-1\",\"aria-label\":\"Direct link to 3-in-1\"}]]}],\"\\n\",\"$L18\",\"\\n\",\"$L19\",\"\\n\",\"$L1a\",\"\\n\",\"$L1b\",\"\\n\",\"$L1c\",\"\\n\",\"$L1d\",\"\\n\",\"$L1e\",\"\\n\",\"$L1f\",\"\\n\",\"$L20\",\"\\n\",\"$L21\",\"\\n\",\"$L22\",\"\\n\",\"$L23\",\"\\n\",\"$L24\",\"\\n\",\"$L25\",\"\\n\",\"$L26\",\"\\n\",\"$L27\",\"\\n\",\"$L28\",\"\\n\",\"$L29\",\"\\n\",\"$L2a\",\"\\n\",\"$L2b\",\"\\n\",\"$L2c\",\"\\n\",\"$L2d\",\"\\n\",\"$L2e\",\"\\n\",\"$L2f\",\"\\n\",\"$L30\",\"\\n\",\"$L31\",\"\\n\",\"$L32\",\"\\n\",\"$L33\",\"\\n\",\"$L34\",\"\\n\",\"$L35\",\"\\n\",\"$L36\",\"\\n\",\"$L37\",\"\\n\",\"$L38\",\"\\n\",\"$L39\",\"\\n\",\"$L3a\",\"\\n\",\"$L3b\",\"\\n\",\"$L3c\",\"\\n\",\"$L3d\",\"\\n\",\"$L3e\",\"\\n\",\"$L3f\",\"\\n\",\"$L40\",\"\\n\",\"$L41\",\"\\n\",\"$L42\",\"\\n\",\"$L43\",\"\\n\",\"$L44\",\"\\n\",\"$L45\",\"\\n\",\"$L46\",\"\\n\",\"$L47\",\"\\n\",\"$L48\",\"\\n\",\"$L49\",\"\\n\",\"$L4a\",\"\\n\",\"$L4b\",\"\\n\",\"$L4c\",\"\\n\",\"$L4d\",\"\\n\",\"$L4e\",\"\\n\",\"$L4f\",\"\\n\",\"$L50\",\"\\n\",\"$L51\",\"\\n\",\"$L52\",\"\\n\",\"$L53\",\"\\n\",\"$L54\",\"\\n\",\"$L55\",\"\\n\",\"$L56\",\"\\n\",\"$L57\",\"\\n\",\"$L58\",\"\\n\",\"$L59\",\"\\n\",\"$L5a\",\"\\n\",\"$L5b\",\"\\n\",\"$L5c\",\"\\n\",\"$L5d\",\"\\n\",\"$L5e\",\"\\n\",\"$L5f\",\"\\n\",\"$L60\",\"\\n\",\"$L61\",\"\\n\",\"$L62\",\"\\n\",\"$L63\",\"\\n\",\"$L64\",\"\\n\",\"$L65\",\"\\n\",\"$L66\",\"\\n\",\"$L67\",\"\\n\",\"$L68\",\"\\n\",\"$L69\",\"\\n\",\"$L6a\",\"\\n\",\"$L6b\",\"\\n\",\"$L6c\",\"\\n\",\"$L6d\",\"\\n\",\"$L6e\",\"\\n\",\"$L6f\",\"\\n\",\"$L70\",\"\\n\",\"$L71\",\"\\n\",\"$L72\",\"\\n\",\"$L73\",\"\\n\",\"$L74\",\"\\n\",\"$L75\",\"\\n\",\"$L76\",\"\\n\",\"$L77\",\"\\n\",\"$L78\",\"\\n\",\"$L79\",\"\\n\",\"$L7a\",\"\\n\",\"$L7b\",\"\\n\",\"$L7c\",\"\\n\",\"$L7d\",\"\\n\",\"$L7e\",\"\\n\",\"$L7f\",\"\\n\",\"$L80\",\"\\n\",\"$L81\",\"\\n\",\"$L82\",\"\\n\",\"$L83\",\"\\n\",\"$L84\",\"\\n\",\"$L85\",\"\\n\",\"$L86\",\"\\n\",\"$L87\",\"\\n\",\"$L88\",\"\\n\",\"$L89\",\"\\n\",\"$L8a\",\"\\n\",\"$L8b\",\"\\n\",\"$L8c\",\"\\n\",\"$L8d\"]\n"])</script>
458<script>self.__next_f.push([1,"18:[\"$\",\"p\",null,{\"children\":\"If you use more than one layout in your app, you may opt for the aggregate\\ncomponent, which bundles all three layouts.\"}]\n19:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" PhotoAlbum \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/styles.css\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}]}]\n1a:[\"$\",\"h2\",null,{\"id\":\"CommonProps\",\"children\":[\"Common Props\",[\"$\",\"a\",null,{\"href\":\"#CommonProps\",\"title\":\"Direct link to Common Props\",\"aria-label\":\"Direct link to Common Props\"}]]}]\n1b:[\"$\",\"p\",null,{\"children\":\"The following props are applicable to all three layouts.\"}]\n1c:[\"$\",\"table\",null,{\"className\":\"docs\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Property\"}],[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"children\":\"Description\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":[\"$\",\"span\",null,{\"className\":\"required\",\"children\":\"photos\"}]}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"Photo[]\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"An array of photos to display in the photo album.\\nSee \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#Photo\",\"prefetch\":false,\"children\":\"Photo\"}],\" for details.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"spacing\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"number | function\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"children\":\"Spacing between images (similar to CSS grid gap).\"}],[\"$\",\"p\",null,{\"children\":\"Default responsive value:\"}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":\"20, when container width \u003e= 1200\"}],[\"$\",\"li\",null,{\"children\":\"15, when container width \u003e= 600 and \u003c 1200\"}],[\"$\",\"li\",null,{\"children\":\"10, when container width \u003e= 300 and \u003c 600\"}],[\"$\",\"li\",null,{\"children\":\"5, when container width \u003c 300\"}]]}]]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"padding\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"number | function\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"children\":\"Padding around each image.\"}],[\"$\",\"p\",null,{\"children\":[\"Default value: \",[\"$\",\"span\",null,{\"className\":\"font-mono\",\"children\":\"0\"}]]}]]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"onClick\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"function\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[\"Photo click callback. See \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#ClickHandler\",\"prefetch\":false,\"children\":\"Click Handler\"}],\" for details.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"sizes\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"object\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Photo album container width in various viewports. See \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#Sizes\",\"prefetch\":false,\"children\":\"Sizes\"}],\"\\nfor details.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"breakpoints\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"number[]\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Photo album layout breakpoints. See \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#Breakp
458oints\",\"prefetch\":false,\"children\":\"Breakpoints\"}],\" for details.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"componentsProps\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"object | function\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Additional HTML attributes to be passed to the rendered elements.\\nSee \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#ComponentsProps\",\"prefetch\":false,\"children\":\"Components Props\"}],\" for details.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"render\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"object | function\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Custom render functions. See \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#RenderFunctions\",\"prefetch\":false,\"children\":\"Render Functions\"}],\" for details.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"defaultContainerWidth\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"number\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"The default container width in server-side rendering (SSR).\\nSee \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#Server-SideRendering(SSR)_DefaultContainerWidth\",\"prefetch\":false,\"children\":\"Default Container Width\"}],\" for details.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"skeleton\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"ReactNode\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Fallback skeleton in SSR.\\nSee \",\"$L8e\",\" for details.\"]}]}]]}]]}]]}]\n1d:[\"$\",\"h2\",null,{\"id\":\"RowsPhotoAlbumProps\",\"children\":[\"RowsPhotoAlbum Props\",[\"$\",\"a\",null,{\"href\":\"#RowsPhotoAlbumProps\",\"title\":\"Direct link to RowsPhotoAlbum Props\",\"aria-label\":\"Direct link to RowsPhotoAlbum Props\"}]]}]\n1e:[\"$\",\"table\",null,{\"className\":\"docs\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Property\"}],[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"children\":\"Description\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"targetRowHeight\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"number | function\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"children\":\"Target row height.\"}],[\"$\",\"p\",null,{\"children\":\"Default responsive value:\"}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":\"(container width) / 5, when container width \u003e= 1200\"}],[\"$\",\"li\",null,{\"children\":\"(container width) / 4, when container width \u003e= 600 and \u003c 1200\"}],[\"$\",\"li\",null,{\"children\":\"(container width) / 5, when container width \u003e= 300 and \u003c 600\"}],[\"$\",\"li\",null,{\"children\":\"(container width) / 2, when container width \u003c 300\"}]]}]]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"rowConstraints\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"object | function\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"children\":\"Additional row constraints.\"}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"minPhotos\"}],\" - minimum number of photos per row\"]}],[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"maxPhotos\"}],\" - maximum number of photos per row\"]}],[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"singleRowMaxHeight\"}],\" - maximum row height when there are not enough\\nphotos to fill more than one row\"]}]]}]]}]}]]}]]}]]}]\n1f:[\"$\",\"p\",null,{\"children\":\"Usage example:\"}]\n20:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"targetRowHeight\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"150\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"rowConstraints\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" singleRowMaxHeight\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"250\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n21:[\"$\",\"h2\",null,{\"id\":\"ColumnsPhotoAlbumProps\",\"children\":[\"ColumnsPhotoAlbum Props\",[\"$\",\"a\",null,{\"href\":\"#ColumnsPhotoAlbumProps\",\"title\":\"Direct link to ColumnsPhotoAlbum Props\",\"aria-label\":\"Direct link to ColumnsPhotoAlbum Props\"}]]}]\n22:[\"$\",\"table\",null,{\"className\":\"docs\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Property\"}],[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"children\":\"Description\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"columns\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"number | function\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"children\":\"Number of columns.\"}],[\"$\",\"p\",null,{\"children\":\"Default responsive value:\"}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":\"5, when container width \u003e= 1200\"}],[\"$\",\"li\",null,{\"children\":\"4, when container width \u003e= 600 and \u003c 1200\"}],[\"$\",\"li\",null,{\"children\":\"3, when container width \u003e= 3
45800 and \u003c 600\"}],[\"$\",\"li\",null,{\"children\":\"2, when container width \u003c 300\"}]]}]]}]}]]}]}]]}]\n23:[\"$\",\"p\",null,{\"children\":\"Usage example:\"}]\n24:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"ColumnsPhotoAlbum\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"columns\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"4\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n25:[\"$\",\"h2\",null,{\"id\":\"MasonryPhotoAlbumProps\",\"children\":[\"MasonryPhotoAlbum Props\",[\"$\",\"a\",null,{\"href\":\"#MasonryPhotoAlbumProps\",\"title\":\"Direct link to MasonryPhotoAlbum Props\",\"aria-label\":\"Direct link to MasonryPhotoAlbum Props\"}]]}]\n26:[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"MasonryPhotoAlbum\"}],\" accepts \",[\"$\",\"code\",null,{\"children\":\"columns\"}],\" prop identical to the one supported by the\\n\",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#ColumnsPhotoAlbumProps\",\"prefetch\":false,\"children\":\"ColumnsPhotoAlbum\"}],\".\"]}]\n27:[\"$\",\"p\",null,{\"children\":\"Usage example:\"}]\n28:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"MasonryPhotoAlbum\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"columns\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"4\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n29:[\"$\",\"h2\",null,{\"id\":\"PhotoAlbumProps\",\"children\":[\"PhotoAlbum Props\",[\"$\",\"a\",null,{\"href\":\"#PhotoAlbumProps\",\"title\":\"Direct link to PhotoAlbum Props\",\"aria-label\":\"Direct link to PhotoAlbum Props\"}]]}]\n2a:[\"$\",\"p\",null,{\"children\":[\"The aggregate \",[\"$\",\"code\",null,{\"children\":\"PhotoAlbum\"}],\" component supports all relevant props that correspond\\nto the selected layout.\"]}]\n2b:[\"$\",\"table\",null,{\"className\":\"docs\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Property\"}],[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"children\":\"Description\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":[\"$\",\"span\",null,{\"className\":\"required\",\"children\":\"layout\"}]}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"\\\"columns\\\" | \\\"rows\\\" | \\\"masonry\\\"\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Photo album layout type.\"}]]}]}]]}]\n2c:[\"$\",\"p\",null,{\"children\":\"Usage example:\"}]\n2d:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"PhotoAlbum\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"layout\"}],[\"$\",\"span\",null,{\"className\":\"token attr-value\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation attr-equals\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\\\"\"}],\"rows\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\\\"\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"targetRowHeight\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"150\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n2e:[\"$\",\"h2\",null,{\"id\":\"Photo\",\"children\":[\"Photo\",[\"$\",\"a\",null,{\"href\":\"#Photo\",\"title\":\"Direct link to Photo\",\"aria-label\":\"Direct link to Photo\"}]]}]\n2f:[\"$\",\"table\",null,{\"className\":\"docs\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Property\"}],[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"children\":\"Description\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":[\"$\",\"span\",null,{\"className\":\"required\",\"children\":\"src\"}]}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"string\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Image source.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":[\"$\",\"span\",null,{\"className\":\"required\",\"children\":\"width\"}]}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"number\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Image width in pixels.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":[\"$\",\"span\",null,{\"className\":\"required\",\"children\":\"he
458ight\"}]}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"number\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Image height in pixels.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"key\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"string\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[\"React \",[\"$\",\"code\",null,{\"children\":\"key\"}],\" attribute.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"alt\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"string\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[\"Image \",[\"$\",\"code\",null,{\"children\":\"alt\"}],\" attribute.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"title\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"string\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[\"Image \",[\"$\",\"code\",null,{\"children\":\"title\"}],\" attribute.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"href\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"string\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Image link URL.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"label\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"string\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"ARIA label for the link and button elements.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"srcSet\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":[\"$\",\"p\",null,{\"children\":[\"{\",[\"$\",\"br\",null,{}],\"\\n  src: string;\",[\"$\",\"br\",null,{}],\"\\n  width: number;\",[\"$\",\"br\",null,{}],\"\\n  height: number;\",[\"$\",\"br\",null,{}],\"\\n}[]\"]}]}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"children\":[\"Optional array of alternative images to be included in the \",[\"$\",\"code\",null,{\"children\":\"srcset\"}],\" attribute.\"]}],[\"$\",\"p\",null,{\"children\":[\"All images in a given \",[\"$\",\"code\",null,{\"children\":\"Photo\"}],\" object must be of the same aspect ratio.\"]}]]}]}]]}]]}]]}]\n30:[\"$\",\"p\",null,{\"children\":\"You can also provide custom photo attributes and access them in the render\\nfunctions.\"}]\n31:[\"$\",\"h2\",null,{\"id\":\"ClickHandler\",\"children\":[\"Click Handler\",[\"$\",\"a\",null,{\"href\":\"#ClickHandler\",\"title\":\"Direct link to Click Handler\",\"aria-label\":\"Direct link to Click Handler\"}]]}]\n32:[\"$\",\"p\",null,{\"children\":[\"You can add interactive behavior by providing the \",[\"$\",\"code\",null,{\"children\":\"onClick\"}],\" callback.\"]}]\n33:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"onClick\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" index \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"openLightbox\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"index\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n34:[\"$\",\"p\",null,{\"children\":\"The callback function accepts a single parameter with the following props:\"}]\n35:[\"$\",\"table\",null,{\"className\":\"docs\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Property\"}],[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"children\":\"Description\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"index\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"number\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[\"Photo index in the original \",[\"$\",\"code\",null,{\"children\":\"photos\"}],\" array.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"photo\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"Photo\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Photo object.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"event\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"MouseEvent\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Corresponding mouse event.\"}]]}]]}]]}]\n36:[\"$\",\"h2\",null,{\"id\":\"ResponsiveProps\",\"children\":[\"Re
458sponsive Props\",[\"$\",\"a\",null,{\"href\":\"#ResponsiveProps\",\"title\":\"Direct link to Responsive Props\",\"aria-label\":\"Direct link to Responsive Props\"}]]}]\n37:[\"$\",\"p\",null,{\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/\",\"prefetch\":false,\"children\":\"React Photo Album\"}],\" accepts various props as responsive parameters.\"]}]\n38:[\"$\",\"p\",null,{\"children\":\"Responsive props can be provided either as a hard-coded value:\"}]\n39:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"ColumnsPhotoAlbum\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"columns\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"3\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n3a:[\"$\",\"p\",null,{\"children\":\"or as a function of container width:\"}]\n3b:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"ColumnsPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"columns\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"containerWidth\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"if\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"containerWidth \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u003c\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"400\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"return\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"2\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"if\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"containerWidth \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u003c\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"800\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"return\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"3\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"return\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"4\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n3c:[\"$\",\"h2\",null,{\"id\":\"ComponentsProps\",\"children\":[\"Components Props\",[\"$\",\"a\",null,{\"href\":\"#ComponentsProps\",\"title\":\"Direct link to Components Props\",\"aria-label\":\"Direct link to Components Props\"}]]}]\n3d:[\"$\",\"p\",null,{\"children\":[\"You can pass additional HTML attributes to the rendered elements through the\\n\",[\"$\",\"code\",null,{\"children\":\"componentsProps\"}],\" parameter.\"]}]\n3e:[\"$\",\"table\",null,{\"className\":\"docs\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Property\"}],[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"children\":\"Description\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"container\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"ComponentProps\u003c\\\"div\\\"\u003e\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[\"Additional HTML attributes for the outer \",[\"$\",\"code\",null,{\"children\":\"div\"}],\" container.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"track\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"ComponentProps\u003c\\\"div\\\"\u003e\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[\"Additional HTML attributes for the row / column \",[\"$\",\"code\",null,{\"children\":\"div\"}],\" containers.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"wrapper\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"ComponentProps\u003c\\\"div\\\"\u003e\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[\"Additional HTML attributes for the image \",[\"$\",\"code\",null,{\"children\":\"div\"}],\" wrapper.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"link\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"ComponentProps\u003c\\\"a\\\"\u003e\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[\"Additional HTML attributes for the photo \",[\"$\",\"code\",null,{\"children\":\"a\"}],\" link.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"button\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"ComponentProps\u003c\\\"button\\\"\u003e\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[\"Additional HTML attributes for the photo \",[\"$\",\"code\",null,{\"children\":\"button\"}],\" element.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"image\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"ComponentProps\u003c\\\"img\\\"\u003e\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"children\":[\"Additional HTML attributes for the photo \",[\"$\",\"code\",null,{\"children\":\"img\"}],\" element.\"]}],[\"$\",\"p\",null,{\"children\":[\"Default: \",[\"$\",\"span\",null,{\"className\":\"font-mono\",\"children\":\"{ loading: \\\"lazy\\\", decoding: \\\"async\\\"}\"}]]}]]}]}]]}]]}]]}]\n3f:[\"$\",\"p\",null,{\"children\":\"Usage example:\"}]\n40:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"componentsProps\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"containerWidth\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n image\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" loading\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"containerWidth \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"||\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"0\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"600\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"?\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"eager\\\"\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"lazy\\\"\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n41:[\"$\",\"h2\",null,{\"id\":\"RenderFunctions\",\"children\":[\"Render Functions\",[\"$\",\"a\",null,{\"href\":\"#RenderFunctions\",\"t
458itle\":\"Direct link to Render Functions\",\"aria-label\":\"Direct link to Render Functions\"}]]}]\n42:[\"$\",\"p\",null,{\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/\",\"prefetch\":false,\"children\":\"React Photo Album\"}],\" allows you to customize all rendered elements by\\nsupplying your own custom render functions. Each render function provides the\\ndefault element's props as a first parameter. These typically include \",[\"$\",\"code\",null,{\"children\":\"style\"}],\"\\nand \",[\"$\",\"code\",null,{\"children\":\"className\"}],\" attributes the default implementation requires.\"]}]\n43:[\"$\",\"table\",null,{\"className\":\"docs\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Property\"}],[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"children\":\"Description\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"container\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"(props) =\u003e ReactNode\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Render custom container.\\nSee \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#RenderFunctions_Container\",\"prefetch\":false,\"children\":\"Container\"}],\" for details.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"track\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"(props) =\u003e ReactNode\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Render custom row / column container.\\nSee \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#RenderFunctions_Track\",\"prefetch\":false,\"children\":\"Track\"}],\" for details.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"wrapper\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"(props, context) =\u003e ReactNode\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Render custom image wrapper.\\nSee \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#RenderFunctions_Wrapper\",\"prefetch\":false,\"children\":\"Wrapper\"}],\" for details.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"link\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"(props, context) =\u003e ReactNode\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Render custom link element.\\nSee \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#RenderFunctions_Link\",\"prefetch\":false,\"children\":\"Link\"}],\" for details.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"button\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"(props, context) =\u003e ReactNode\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Render custom button element.\\nSee \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#RenderFunctions_Button\",\"prefetch\":false,\"children\":\"Button\"}],\" for details.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"image\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"(props, context) =\u003e ReactNode\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Render custom image element.\\nSee \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#RenderFunctions_Image\",\"prefetch\":false,\"children\":\"Image\"}],\" for details.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"extras\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"(props, context) =\u003e ReactNode\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Render custom markup immediately after each image.\\nSee \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#RenderFunctions_Extras\",\"prefetch\":false,\"children\":\"Extras\"}],\" for details.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"photo\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"(props, context) =\u003e ReactNode\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Render custom photo.\\nSee \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#RenderFunctions_Photo\",\"prefetch\":false,\"children\":\"Photo\"}],\" for details.\"]}]}]]}]]}]]}]\n44:[\"$\",\"p\",null,{\"children\":\"When applicable, the second parameter represents the photo rendering context.\"}]\n45:[\"$\",\"table\",null,{\"className\":\"docs\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Property\"}],[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"children\":\"Description\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"photo\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"Photo\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Photo object.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"index\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"number\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[\"Photo index in the original \",[\"$\",\"code\",null,{\"children\":\"photos\"}],\" array.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"width\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"number\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Rendered photo width in pixels.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"he
458ight\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"number\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Rendered photo height in pixels.\"}]]}]]}]]}]\n46:[\"$\",\"h3\",null,{\"id\":\"RenderFunctions_Container\",\"children\":[\"Container\",[\"$\",\"a\",null,{\"href\":\"#RenderFunctions_Container\",\"title\":\"Direct link to Container\",\"aria-label\":\"Direct link to Container\"}]]}]\n47:[\"$\",\"p\",null,{\"children\":[\"You can customize the photo album \",[\"$\",\"code\",null,{\"children\":\"div\"}],\" container through the \",[\"$\",\"code\",null,{\"children\":\"render.container\"}],\"\\nprop. Your implementation must forward the \",[\"$\",\"code\",null,{\"children\":\"ref\"}],\" attribute to the underlying\\ncontainer element.\"]}]\n48:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"render\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token function-variable function\",\"children\":\"container\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" ref\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"...\"}],\"rest \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],\"div\"]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"ref\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"ref\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token spread\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"...\"}],\"rest\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n49:[\"$\",\"h3\",null,{\"id\":\"RenderFunctions_Track\",\"children\":[\"Track\",[\"$\",\"a\",null,{\"href\":\"#RenderFunctions_Track\",\"title\":\"Direct link to Track\",\"aria-label\":\"Direct link to Track\"}]]}]\n4a:[\"$\",\"p\",null,{\"children\":[\"You can customize the row / column \",[\"$\",\"code\",null,{\"children\":\"div\"}],\" containers through the \",[\"$\",\"code\",null,{\"children\":\"render.track\"}],\"\\nprop. This is not common.\"]}]\n4b:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"render\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token function-variable function\",\"children\":\"track\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"props\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],\"div\"]}],\" \",[\"$\",\"span\",null,{\"className\":\"token spread\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"...\"}],\"props\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n4c:[\"$\",\"h3\",null,{\"id\":\"RenderFunctions_Wrapper\",\"children\":[\"Wrapper\",[\"$\",\"a\",null,{\"href\":\"#RenderFunctions_Wrapper\",\"title\":\"Direct link to Wrapper\",\"aria-label\":\"Direct link to Wrapper\"}]]}]\n4d:[\"$\",\"p\",null,{\"children\":[\"You can customize the image wrapper through the \",[\"$\",\"code\",null,{\"children\":\"render.wrapper\"}],\" prop. This\\nwrapper is rendered only when photos are not clickable (there is no \",[\"$\",\"code\",null,{\"children\":\"href\"}],\" photo\\nprop and no \",[\"$\",\"code\",null,{\"children\":\"onClick\"}],\" callback). This is not common.\"]}]\n4e:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"render\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token function-variable function\",\"children\":\"wrapper\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"props\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],\"div\"]}],\" \",[\"$\",\"span\",null,{\"className\":\"token spread\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"...\"}],\"props\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n4f:[\"$\",\"h3\",null,{\"id\":\"RenderFunctions_Link\",\"children\":[\"Link\",[\"$\",\"a\",null,{\"href\":\"#RenderFunctions_Link\",\"title\":\"Direct link to Link\",\"aria-label\":\"Direct link to Link\"}]]}]\n50:[\"$\",\"p\",null,{\"children\":[\"A link element is rendered when a photo has an \",[\"$\",\"code\",null,{\"children\":\"href\"}],\" attribute. You can provide\\nyour own link implementation through the \",[\"$\",\"code\",null,{\"children\":\"render.link\"}],\" prop.\"]}]\n51:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"render\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token function-variable function\",\"children\":\"link\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"props\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],\"a\"]}],\" \",[\"$\",\"span\",null,{\"className\":\"token spread\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"...\"}],\"props\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n52:[\"$\",\"h3\",null,{\"id\":\"RenderFunctions_Button\",\"children\":[\"Button\",[\"$\",\"a\",null,{\"href\":\"#RenderFunctions_Button\",\"t
458itle\":\"Direct link to Button\",\"aria-label\":\"Direct link to Button\"}]]}]\n53:[\"$\",\"p\",null,{\"children\":[\"A button element is rendered when the photo album has an \",[\"$\",\"code\",null,{\"children\":\"onClick\"}],\" callback. You\\ncan provide your own button implementation through the \",[\"$\",\"code\",null,{\"children\":\"render.button\"}],\" prop.\"]}]\n54:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"render\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token function-variable function\",\"children\":\"button\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"props\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],\"button\"]}],\" \",[\"$\",\"span\",null,{\"className\":\"token spread\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"...\"}],\"props\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n55:[\"$\",\"h3\",null,{\"id\":\"RenderFunctions_Image\",\"children\":[\"Image\",[\"$\",\"a\",null,{\"href\":\"#RenderFunctions_Image\",\"title\":\"Direct link to Image\",\"aria-label\":\"Direct link to Image\"}]]}]\n56:[\"$\",\"p\",null,{\"children\":[\"You can provide your own image implementation through the \",[\"$\",\"code\",null,{\"children\":\"render.image\"}],\" prop.\"]}]\n57:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"render\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token function-variable function\",\"children\":\"image\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"props\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],\"img\"]}],\" \",[\"$\",\"span\",null,{\"className\":\"token spread\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"...\"}],\"props\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n58:[\"$\",\"h3\",null,{\"id\":\"RenderFunctions_Extras\",\"children\":[\"Extras\",[\"$\",\"a\",null,{\"href\":\"#RenderFunctions_Extras\",\"t
458itle\":\"Direct link to Extras\",\"aria-label\":\"Direct link to Extras\"}]]}]\n59:[\"$\",\"p\",null,{\"children\":[\"You can render custom elements alongside each photo. This can be useful for\\nrendering interactive icons with \",[\"$\",\"code\",null,{\"children\":\"position: absolute\"}],\".\"]}]\n5a:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"render\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token function-variable function\",\"children\":\"extras\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"_\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" photo\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" index \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"FavoriteIcon\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photo\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photo\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"index\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"index\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n5b:[\"$\",\"h3\",null,{\"id\":\"RenderFunctions_Photo\",\"children\":[\"Photo\",[\"$\",\"a\",null,{\"href\":\"#RenderFunctions_Photo\",\"title\":\"Direct link to Photo\",\"aria-label\":\"Direct link to Photo\"}]]}]\n5c:[\"$\",\"p\",null,{\"children\":[\"This is the render function that completely overrides the default \",[\"$\",\"code\",null,{\"children\":\"wrapper\"}],\",\\n\",[\"$\",\"code\",null,{\"children\":\"link\"}],\", \",[\"$\",\"code\",null,{\"children\":\"button\"}],\", \",[\"$\",\"code\",null,{\"children\":\"image\"}],\", and \",[\"$\",\"code\",null,{\"children\":\"extras\"}],\" render functions. The only prop provided\\nin the first argument is the \",[\"$\",\"code\",null,{\"children\":\"onClick\"}],\" callback.\"]}]\n5d:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"render\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token function-variable function\",\"children\":\"photo\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" onClick \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" photo\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" width\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" height \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"CustomPhoto\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photo\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photo\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"width\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"width\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"he
458ight\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"height\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"onClick\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"onClick\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n5e:[\"$\",\"h2\",null,{\"id\":\"Breakpoints\",\"children\":[\"Breakpoints\",[\"$\",\"a\",null,{\"href\":\"#Breakpoints\",\"title\":\"Direct link to Breakpoints\",\"aria-label\":\"Direct link to Breakpoints\"}]]}]\n5f:[\"$\",\"p\",null,{\"children\":[\"By default, \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/\",\"prefetch\":false,\"children\":\"React Photo Album\"}],\" re-calculates its layout every time its\\ncontainer width changes. For example, the layout may be re-calculated dozens of\\ntimes during a browser window resize. If this behavior is undesired, you can\\navoid it by providing the \",[\"$\",\"code\",null,{\"children\":\"breakpoints\"}],\" prop (e.g.,\\n\",[\"$\",\"span\",null,{\"className\":\"font-mono\",\"children\":\"[300, 600, 1200]\"}],\"). When the \",[\"$\",\"code\",null,{\"children\":\"breakpoints\"}],\"\\nparameter is defined, \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/\",\"prefetch\":false,\"children\":\"React Photo Album\"}],\" calculates the layout only once per\\nthe breakpoint interval.\"]}]\n"])</script>
458<script>self.__next_f.push([1,"60:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"breakpoints\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"300\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"600\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"1200\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n61:[\"$\",\"h2\",null,{\"id\":\"Sizes\",\"children\":[\"Sizes\",[\"$\",\"a\",null,{\"href\":\"#Sizes\",\"title\":\"Direct link to Sizes\",\"aria-label\":\"Direct link to Sizes\"}]]}]\n62:[\"$\",\"p\",null,{\"children\":[\"Photo album components automatically generate \",[\"$\",\"code\",null,{\"children\":\"sizes\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"srcset\"}],\" image\\nattributes when photo objects contain a \",[\"$\",\"code\",null,{\"children\":\"srcSet\"}],\" array. By default,\\n\",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/\",\"prefetch\":false,\"children\":\"React Photo Album\"}],\" assumes that the photo album utilizes approximately\\n\",[\"$\",\"span\",null,{\"className\":\"font-mono\",\"children\":\"100vw\"}],\" of the page width. If that's not the case,\\nyou can improve the performance of your responsive images by describing your\\nphoto album size in different viewports.\"]}]\n63:[\"$\",\"p\",null,{\"children\":[\"For example, this website uses the following \",[\"$\",\"code\",null,{\"children\":\"sizes\"}],\" attribute to account for\\nthe content container padding and the left-hand side navigation menu:\"]}]\n64:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"sizes\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n size\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"992px\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n sizes\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" viewport\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"(max-width: 767px)\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" size\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"calc(100vw - 32px)\\\"\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" viewport\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"(max-width: 1279px)\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" size\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"calc(100vw - 288px)\\\"\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n65:[\"$\",\"h2\",null,{\"id\":\"StylingFocusIndicators\",\"children\":[\"Styling Focus Indicators\",[\"$\",\"a\",null,{\"href\":\"#StylingFocusIndicators\",\"title\":\"Direct link to Styling Focus Indicators\",\"aria-label\":\"Direct link to Styling Focus Indicators\"}]]}]\n66:[\"$\",\"p\",null,{\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/\",\"prefetch\":false,\"children\":\"React Photo Album\"}],\" does not provide an opinionated styling for keyboard\\nfocus indicators, so buttons and links are styled with browser-default focus\\
458nindicator styles. You can implement your own styles to match your website\\ndesign. Here is an example you can use as a starting point.\"]}]\n67:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-css\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token selector\",\"children\":\".react-photo-album--link:focus-visible,\\n.react-photo-album--button:focus-visible\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token property\",\"children\":\"outline\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" 9px double white\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token property\",\"children\":\"box-shadow\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" 0 0 0 6px black\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\\n\",[\"$\",\"span\",null,{\"className\":\"token atrule\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token rule\",\"children\":\"@supports\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"not\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"selector\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token selector-function-argument selector\",\"children\":\":focus-visible\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token selector\",\"children\":\".react-photo-album--link:focus,\\n .react-photo-album--button:focus\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token property\",\"children\":\"outline\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" 9px double white\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token property\",\"children\":\"box-shadow\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\":\"}],\" 0 0 0 6px black\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}]}]\n68:[\"$\",\"h2\",null,{\"id\":\"InfiniteScroll\",\"children\":[\"Infinite Scroll\",[\"$\",\"a\",null,{\"href\":\"#InfiniteScroll\",\"title\":\"Direct link to Infinite Scroll\",\"aria-label\":\"Direct link to Infinite Scroll\"}]]}]\n69:[\"$\",\"p\",null,{\"children\":[\"The library provides \",[\"$\",\"code\",null,{\"children\":\"InfiniteScroll\"}],\" component that you can use to implement an\\ninfinite scroll feature in your app.\"]}]\n6a:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" InfiniteScroll \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/scroll\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}]}]\n6b:[\"$\",\"table\",null,{\"className\":\"docs\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Property\"}],[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"children\":\"Description\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":[\"$\",\"span\",null,{\"className\":\"required\",\"children\":\"children\"}]}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"ReactElement\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"The photo album component, which must be the only child.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":[\"$\",\"span\",null,{\"className\":\"required\",\"children\":\"fetch\"}]}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"(index: number) =\u003e Promise\u003cPhoto[] | null\u003e\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Photo fetcher. Resolve the promise with \",[\"$\",\"code\",null,{\"children\":\"null\"}],\" to indicate the end of\\nthe stream. The promise must always settle; implement timeouts and\\ncancellation inside the callback as needed.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"photos\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"Photo[]\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Initial photos (optional).\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"onClick\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"({ photos, photo, index, event }) =\u003e void\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Photo click callback. The \",[\"$\",\"code\",null,{\"children\":\"photos\"}],\" parameter represents a flat array of\\nall fetched photos.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"retries\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"number\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"children\":\"Retry attempts.\"}],[\"$\",\"p\",null,{\"children\":[\"Default value: \",[\"$\",\"span\",null,{\"className\":\"font-mono\",\"children\":\"0\"}]]}]]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"singleton\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"boolean\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Use a single photo album component (masonry layout).\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"scrollC
458ontainer\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"() =\u003e HTMLElement | null\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":\"The nearest scrollable ancestor other than the viewport.\"}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"fetchRootMargin\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"string\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"children\":[\"Fetcher \",[\"$\",\"code\",null,{\"children\":\"IntersectionObserver\"}],\" root margin setting.\"]}],[\"$\",\"p\",null,{\"children\":[\"Default value: \",[\"$\",\"span\",null,{\"className\":\"font-mono\",\"children\":\"800px\"}]]}]]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"offscreenRootMargin\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"string\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"children\":[\"Offscreen \",[\"$\",\"code\",null,{\"children\":\"IntersectionObserver\"}],\" root margin setting.\"]}],[\"$\",\"p\",null,{\"children\":[\"Default value: \",[\"$\",\"span\",null,{\"className\":\"font-mono\",\"children\":\"2000px\"}]]}]]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"error\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"ReactNode\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Markup to display when an error occurs.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"loading\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"ReactNode\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Markup to display while fetching additional photos.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"finished\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"ReactNode\"}],\"$L8f\"]}]]}]]}]\n6c:[\"$\",\"p\",null,{\"children\":[\"In singleton mode (masonry layout), custom \",[\"$\",\"code\",null,{\"children\":\"render.photo\"}],\" functions must forward\\n\",[\"$\",\"code\",null,{\"children\":\"ref\"}],\" to the underlying DOM node. Without \",[\"$\",\"code\",null,{\"children\":\"ref\"}],\" forwarding, the offscreen\\noptimization is silently disabled and photos always render at full fidelity.\"]}]\n6d:[\"$\",\"h3\",null,{\"id\":\"InfiniteScroll_RowsLayoutWithInfiniteScroll\",\"children\":[\"Rows Layout With Infinite Scroll\",[\"$\",\"a\",null,{\"href\":\"#InfiniteScroll_RowsLayoutWithInfiniteScroll\",\"title\":\"Direct link to Rows Layout With Infinite Scroll\",\"aria-label\":\"Direct link to Rows Layout With Infinite Scroll\"}]]}]\n6e:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" RowsPhotoAlbum \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" InfiniteScroll \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/scroll\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/rows.css\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\\n\",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// ...\"}],\"\\n\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"export\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"default\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"function\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"Gallery\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"return\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"InfiniteScroll\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"initialPhotos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"fetch\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"fetchPhotos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\"\\n \u003cRowsPhotoAlbum\\n photos=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\"\\n spacing=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"20\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\"\\n componentsProps=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" container\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" style\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" marginBottom\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"20\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\"\\n /\u003e\\n \"}],[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[\"$L90\",\"$L91\"]}],\"$L92\"]}],\"\\n \",\"$L93\",\"$L94\",\"\\n\",\"$L95\",\"\\n\"]}]}]\n6f:[\"$\",\"h3\",null,{\"id\":\"InfiniteScroll_MasonryLayoutWithInfiniteScroll\",\"children\":[\"Masonry Layout With Infinite Scroll\",[\"$\",\"a\",null,{\"href\":\"#InfiniteScroll_MasonryLayoutWithInfiniteScroll\",\"title\":\"Direct link to Masonry Layout With Infinite Scroll\",\"aria-label\":\"Direct link to Masonry Layout With Infinite Scroll\"}]]}]\n70:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" MasonryPhotoAlbum \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" InfiniteScroll \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/scroll\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/masonry.css\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\\n\",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// ...\"}],\"\\n\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"export\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"default\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"function\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"Gallery\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"return\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"InfiniteScroll\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"singleton\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"initialPhotos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"fetch\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"fetchPhotos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\"\\n \u003cMasonryPhotoAlbum\\n photos=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\"\\n spacing=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"20\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\"\\n componentsProps=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" container\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" style\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" marginBottom\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"20\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\"\\n /\u003e\\n \"}],\"$L96\",\"\\n \",\"$L97\",\"$L98\",\"\\n\",\"$L99\",\"\\n\"]}]}]\n71:[\"$\",\"h3\",null,{\"id\":\"InfiniteScroll_ColumnsLayoutWithInfiniteScroll\",\"children\":[\"Columns Layout With Infinite Scroll\",[\"$\",\"a\",null,{\"href\":\"#InfiniteScroll_ColumnsLayoutWithInfiniteScroll\",\"title\":\"Direct link to Columns Layout With Infinite Scroll\",\"aria-label\":\"Direct link to Columns Layout With Infinite Scroll\"}]]}]\n72:[\"$\",\"p\",null,{\"children\":\"Columns layout is not a good fit for the infinite scroll feature.\"}]\n73:[\"$\",\"h2\",null,{\"id\":\"Server-SideRendering(SSR)\",\"children\":[\"Server-Side Rendering (SSR)\",[\"$\",\"a\",null,{\"href\":\"#Server-SideRendering(SSR)\",\"title\":\"Direct link to Server-Side Rendering (SSR)\",\"aria-label\":\"Direct link to Server-Side Rendering (SSR)\"}]]}]\n74:[\"$\",\"p\",null,{\"children\":[\"By default, \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/\",\"prefetch\":false,\"children\":\"React Photo Album\"}],\" produces an empty markup in SSR because the\\nactual container width is usually unknown during server-side rendering. This\\ndefault behavior causes content layout shift after hydration. As a workaround,\\nyou can specify the \",[\"$\",\"code\",null,{\"children\":\"defaultContainerWidth\"}],\" prop to enable photo album markup\\nrendering in SSR. However, that will likely result in the photo album layout\\nshift once the photo album re-calculates its layout on the client. With this\\nbeing said, there isn't a perfect solution for SSR, but there are several\\noptions to choose from, depending on
458your use case.\"]}]\n75:[\"$\",\"h3\",null,{\"id\":\"Server-SideRendering(SSR)_DefaultContainerWidth\",\"children\":[\"Default Container Width\",[\"$\",\"a\",null,{\"href\":\"#Server-SideRendering(SSR)_DefaultContainerWidth\",\"title\":\"Direct link to Default Container Width\",\"aria-label\":\"Direct link to Default Container Width\"}]]}]\n76:[\"$\",\"p\",null,{\"children\":[\"To render photo album markup on the server, you can specify the\\n\",[\"$\",\"code\",null,{\"children\":\"defaultContainerWidth\"}],\" value. It is a perfect SSR solution if your photo album\\nhas a constant width in all viewports (e.g., an image picker in a fixed-size\\nsidebar). However, if the client-side photo album width doesn't match the\\n\",[\"$\",\"code\",null,{\"children\":\"defaultContainerWidth\"}],\", you are almost guaranteed to see a layout shift after\\nhydration.\"]}]\n77:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"defaultContainerWidth\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"800\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n78:[\"$\",\"h3\",null,{\"id\":\"Server-SideRendering(SSR)_Skeleton\",\"children\":[\"Skeleton\",[\"$\",\"a\",null,{\"href\":\"#Server-SideRendering(SSR)_Skeleton\",\"title\":\"Direct link to Skeleton\",\"aria-label\":\"Direct link to Skeleton\"}]]}]\n79:[\"$\",\"p\",null,{\"children\":[\"Alternatively, you can provide a fallback skeleton in the \",[\"$\",\"code\",null,{\"children\":\"skeleton\"}],\" prop that\\nwill be rendered in SSR and swapped with the actual photo album markup after\\nhydration. This approach allows you to reserve a blank space on the page for the\\nphoto album markup and avoid a flash of the below-the-fold content during\\nhydration. The downside of this approach is that images don't start downloading\\nuntil after hydration unless you manually add prefetch links to the document\\n\",[\"$\",\"code\",null,{\"children\":\"\u003chead\u003e\"}],\".\"]}]\n7a:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"skeleton\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],\"div\"]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"style\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" width\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"100%\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" minHeight\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"800\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n\"]}]}]\n7b:[\"$\",\"h3\",null,{\"id\":\"Server-SideRendering(SSR)_VisibilityHidden\",\"children\":[\"Visibility Hidden\",[\"$\",\"a\",null,{\"href\":\"#Server-SideRendering(SSR)_VisibilityHidden\",\"title\":\"Direct link to Visibility Hidden\",\"aria-label\":\"Direct link to Visibility Hidden\"}]]}]\n7c:[\"$\",\"p\",null,{\"children\":[\"Another option is to render the photo album on the server with\\n\",[\"$\",\"code\",null,{\"children\":\"visibility: hidden\"}],\". This way, you can avoid a flash of the below-the-fold\\ncontent and allow the browser to start downloading images before hydration.\"]}]\n7d:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u003c\"}],\"RowsPhotoAlbum\\n photos\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n defaultContainerWidth\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"800\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n componentsProps\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"containerWidth\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\u003e\"}],\"\\n containerWidth \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"===\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"undefined\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"?\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n container\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" style\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" visibility\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"hidden\\\"\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u003e\"}],\"\\n\"]}]}]\n7e:[\"$\",\"h3\",null,{\"id\":\"Server-SideRendering(SSR)_SSRComponent\",\"children\":[\"SSR Component\",[\"$\",\"a\",null,{\"href\":\"#Server-SideRendering(SSR)_SSRComponent\",\"title\":\"Direct link to SSR Component\",\"aria-label\":\"Direct link to SSR Component\"}]]}]\n7f:[\"$\",\"p\",null,{\"children\":[\"The ultimate zero-CLS solution requires pre-rendering multiple layouts on the\\nserver and displaying the correct one on the client using CSS \",[\"$\",\"code\",null,{\"children\":\"@container\"}],\"\\nqueries. \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/\",\"prefetch\":false,\"children\":\"React Photo Album\"}],\" provides \",[\"$\",\"code\",null,{\"children\":\"SSR\"}],\" component implementing this\\napproach. The downside of this approach is the overhead in SSR-generated markup\\nand the hydration of multiple photo album instances on the client (which may be\\na reasonable compromise if zero CLS is a must-have requirement). You can find a\\nlive demo in the \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/examples/zero-cls-ssr\",\"prefetch\":false,\"children\":\"Zero CLS SSR\"}],\" example.\"]}]\n80:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" RowsPhotoAlbum \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token constant\",\"children\":\"SSR\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/ssr\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/rows.css\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" photos \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"./photos\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"export\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"default\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"function\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"Gallery\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"return\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"SSR\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"breakpoints\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"300\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"600\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"900\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"1200\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\"\\n \"}],[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"RowsPhotoAlbum\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],[\"$\",\"span\",null,{\"className\":\"token plain-text\",\"children\":\"\\n \"}],[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"SSR\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\
458\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}]}]\n81:[\"$\",\"table\",null,{\"className\":\"docs\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Property\"}],[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"children\":\"Description\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":[\"$\",\"span\",null,{\"className\":\"required\",\"children\":\"breakpoints\"}]}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"number[]\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Photo album layout breakpoints.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":[\"$\",\"span\",null,{\"className\":\"required\",\"children\":\"children\"}]}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"ReactElement\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Photo album instance, which must be the only child.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"unstyled\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"boolean\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"p\",null,{\"children\":[\"If \",[\"$\",\"code\",null,{\"children\":\"true\"}],\", do not include the inline stylesheet. Use this option if you\\nare using a custom styling solution (e.g., Tailwind CSS).\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"classNames\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":[\"$\",\"p\",null,{\"children\":[\"{\",[\"$\",\"br\",null,{}],\"\\n  container?: string;\",[\"$\",\"br\",null,{}],\"\\n  breakpoints?: {\",[\"$\",\"br\",null,{}],\"\\n    [key: number]: string;\",[\"$\",\"br\",null,{}],\"\\n  }\",[\"$\",\"br\",null,{}],\"\\n}\"]}]}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Custom class names for the container and the breakpoint intervals.\"}]]}]]}]]}]\n82:[\"$\",\"p\",null,{\"children\":\"Please share your feedback if you have successfully used this component in your\\nproject or encountered any issues.\"}]\n83:[\"$\",\"h2\",null,{\"id\":\"ServerComponent\",\"children\":[\"Server Component\",[\"$\",\"a\",null,{\"href\":\"#ServerComponent\",\"title\":\"Direct link to Server Component\",\"aria-label\":\"Direct link to Server Component\"}]]}]\n84:[\"$\",\"p\",null,{\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/\",\"prefetch\":false,\"children\":\"React Photo Album\"}],\" provides a server component for rendering static photo\\nalbums server-side with zero client-side JS bundle (the component produces pure\\nHTML markup with no client components). You can find a live demo in the\\n\",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/examples/server\",\"prefetch\":false,\"children\":\"Server Component\"}],\" example.\"]}]\n85:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" ServerPhotoAlbum \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/server\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}]}]\n86:[\"$\",\"table\",null,{\"className\":\"docs\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Property\"}],[\"$\",\"th\",null,{\"data-mono\":\"true\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"children\":\"Description\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":[\"$\",\"span\",null,{\"className\":\"required\",\"children\":\"layout\"}]}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"\\\"rows\\\" | \\\"columns\\\" | \\\"masonry\\\"\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Layout type.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":[\"$\",\"span\",null,{\"className\":\"required\",\"children\":\"breakpoints\"}]}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"number[]\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Photo album layout breakpoints.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"unstyled\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":\"boolean\"}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":[\"$\",\"div\",null,{\"children\":[\"If \",[\"$\",\"code\",null,{\"children\":\"true\"}],\", do not include the inline stylesheet.\"]}]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"data-label\":\"Property\",\"data-mono\":\"true\",\"children\":\"classNames\"}],[\"$\",\"td\",null,{\"data-label\":\"Type\",\"data-mono\":\"true\",\"children\":[\"$\",\"p\",null,{\"children\":[\"{\",[\"$\",\"br\",null,{}],\"\\n  container?: string;\",[\"$\",\"br\",null,{}],\"\\n  breakpoints?: {\",[\"$\",\"br\",null,{}],\"\\n    [key: number]: string;\",[\"$\",\"br\",null,{}],\"\\n  }\",[\"$\",\"br\",null,{}],\"\\n}\"]}]}],[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Custom class names for the container and the breakpoint intervals.\"}]]}]]}]]}]\n87:[\"$\",\"p\",null,{\"children\":[\"In addition to the props listed above, \",[\"$\",\"code\",null,{\"children\":\"ServerPhotoAlbum\"}],\" supports all relevant\\nprops corresponding to the selected layout type except the\\n\",[\"$\",\"code\",null,{\"children\":\"defaultContainerWidth\"}],\", \",[\"$\",\"code\",null,{\"children\":\"onClick\"}],\", and \",[\"$\",\"code\",null,{\"children\":\"skeleton\"}],\".\"]}]\n88:[\"$\",\"h3\",null,{\"id\":\"ServerComponent_ServerComponentWithDefaultStyling\",\"children\":[\"Server Component With Default Styling\",[\"$\",\"a\",null,{\"href\":\"#ServerComponent_ServerComponentWithDefaultStyling\",\"title\":\"Direct link to Server Component With Default Styling\",\"aria-label\":\"Direct link to Server Component With Default Styling\"}]]}]\n89:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" ServerPhotoAlbum \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/server\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/rows.css\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\\n\",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// ...\"}],\"\\n\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"export\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"default\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"function\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"Gallery\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"return\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"ServerPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"layout\"}],[\"$\",\"span\",null,{\"className\":\"token attr-value\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation attr-equals\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\\\"\"}],\"rows\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\\\"\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"breakpoints\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"300\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"600\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"900\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}]}]\n8a:[\"$\",\"h3\",null,{\"id\":\"ServerComponent_ServerComponentWithTailwindCSSStyling\",\"children\":[\"Server Component With Tailwind CSS Styling\",[\"$\",\"a\",null,{\"href\":\"#ServerComponent_ServerComponentWithTailwindCSSStyling\",\"title\":\"Direct link to Server Component With Tailwind CSS Styling\",\"aria-label\":\"Direct link to Server Component With Tailwind CSS Styling\"}]]}]\n8b:[\"$\",\"p\",null,{\"children\":[\"Here is an example of custom styling using\\n\",[\"$\",\"a\",null,{\"ref\":\"$undefined\",\"href\":\"https://github.com/tailwindlabs/tailwindcss-container-queries\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"children\":\"@tailwindcss/container-queries\"}],\".\"]}]\n8c:[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-tsx\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" ServerPhotoAlbum \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"from\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/server\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"import\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"react-photo-album/rows.css\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\\n\",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// ...\"}],\"\\n\\n\",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"export\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"default\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"function\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"Gallery\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"return\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"ServerPhotoAlbum\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"unstyled\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"layout\"}],[\"$\",\"span\",null,{\"className\":\"token attr-value\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation attr-equals\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\\\"\"}],\"rows\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\\\"\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"photos\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"photos\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"breakpoints\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"300\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"600\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"900\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]]}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token attr-name\",\"children\":\"classNames\"}],[\"$\",\"span\",null,{\"className\":\"token script language-javascript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token script-punctuation punctuation\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n container\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"@container\\\"\"}],[\"$\",\"span\",null,{\"className\"
458:\"token punctuation\",\"children\":\",\"}],\"\\n breakpoints\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"150\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"block @[300px]:hidden\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"300\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"hidden @[300px]:block @[600px]:hidden\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n \",\"$L9a\",\"$L9b\",\" \",\"$L9c\",\"$L9d\",\"\\n \",\"$L9e\",\"$L9f\",\" \",\"$La0\",\"$La1\",\"\\n \",\"$La2\",\"$La3\",\"\\n \",\"$La4\",\"$La5\"]}],\"\\n \",\"$La6\"]}],\"\\n \",\"$La7\",\"$La8\",\"\\n\",\"$La9\",\"\\n\"]}]}]\n8d:[\"$\",\"p\",null,{\"children\":\"Please share your feedback if you have successfully used this component in your\\nproject or encountered any issues.\"}]\n"])</script>
458<script>self.__next_f.push([1,"8e:[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"#Server-SideRendering(SSR)_Skeleton\",\"prefetch\":false,\"children\":\"Skeleton\"}]\n8f:[\"$\",\"td\",null,{\"data-label\":\"Description\",\"children\":\"Markup to display when no more photos are available.\"}]\n90:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c/\"}]\n91:[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"InfiniteScroll\"}]\n92:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]\n93:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}]\n94:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}]\n95:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]\n96:[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token tag\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"InfiniteScroll\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"\u003e\"}]]}]\n97:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}]\n98:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}]\n99:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]\n9a:[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"600\"}]\n9b:[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}]\n9c:[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"hidden @[600px]:block @[900px]:hidden\\\"\"}]\n9d:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}]\n9e:[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"900\"}]\n9f:[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}]\na0:[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"hidden @[900px]:block\\\"\"}]\na1:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}]\na2:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]\na3:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}]\na4:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]\na5:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]\na6:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"/\u003e\"}]\na7:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}]\na8:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}]\na9:[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}]\n"])</script>
458</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.