PageSourceSearch

https://react-photo-album.com/examples

html react-photo-album.com collected 2026-09-25 22:14:03 UTC 37,451 bytes, 19 lines download raw bytes

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>Examples | React Photo Album</title><meta name="description" content="Learn how to use React Photo Album by exploring basic examples with live demos, source code, and ready-to-use code sandboxes."/><link rel="manifest" href="/site.webmanifest"/><meta name="msapplication-TileColor" content="#1a237e"/><link rel="canonical" href="https://react-photo-album.com/examples"/><meta property="og:title" content="React Photo Album | Examples"/><meta property="og:description" content="Learn how to use React Photo Album by exploring basic examples with live demos, source code, and ready-to-use code sandboxes."/><meta property="og:url" content="https://react-photo-album.com/examples"/><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 | Examples"/><meta name="twitter:description" content="Learn how to use React Photo Album by exploring basic examples with live demos, source code, and ready-to-use code sandboxes."/><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)_&amp;]: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))_&amp;]: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" 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 font-bold dark:text-link-underline-invert" 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)_&amp;]: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))_&amp;]: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="Examples">Examples<a href="#Examples" title="Direct link to Examples" aria-label="Direct link to Examples"></a></h1>
2<p>Learn how to use <a href="/">React Photo Album</a> by exploring basic examples with live
3demos, source code, and ready-to-use code sandboxes.</p>
4<ul>
5<li><a href="/examples/rows"><strong>Rows Layout</strong></a> - rows layout example</li>
6<li><a href="/examples/columns"><strong>Columns Layout</strong></a> - columns layout example</li>
7<li><a href="/examples/masonry"><strong>Masonry Layout</strong></a> - masonry layout example</li>
8<li><a href="/examples/playground"><strong>Playground</strong></a> - interactive playground to test
9various parameters live</li>
10<li><a href="/examples/customization"><strong>Customization</strong></a> - an example showcasing custom
11render functions and various photo album props</li>
12<li><a href="/examples/sortable-gallery"><strong>Sortable Gallery</strong></a> - an example of a sortable
13gallery built with <a href="https://dndkit.com/" target="_blank" rel="noreferrer noopener">@dnd-kit</a></li>
14<li><a href="/examples/nextjs"><strong>Next.js Image</strong></a> - Next.js Image component</li>
15<li><a href="/examples/lightbox"><strong>Lightbox</strong></a> - photo gallery with lightbox built with
16<a href="https://yet-another-react-lightbox.com/" target="_blank" rel="noreferrer noopener">yet-another-react-lightbox</a></li>
17</ul>
18<h2 id="SourceCode">Source Code<a href="#SourceCode" title="Direct link to Source Code" aria-label="Direct link to Source Code"></a></h2>
19<a href="https://github.com/igordanchenko/react-photo-album/tree/main/examples/" 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] inline-flex items-center justify-center font-medium px-4 py-1.5 font-medium normal-case rounded hover:no-underline text-white bg-info dark:bg-info-invert hover:bg-info-dark dark:hover:bg-info-dark-invert shadow-button hover:shadow-button-hover active:shadow-button-active focus-visible:shadow-button-focusVisible"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="select-none fill-current w-[1em] h-[1em] text-2xl mr-3"><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>View on GitHub</a><!--$--><!--/$--><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="/documentation"><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">Documentation</span></a></span><span class="flex flex-grow justify-end"><a class="inline-flex group font-bold p-3 outline-0" href="/examples/rows"><span class="link group-hover:decoration-2 group-focus-visible:decoration-2">Rows Layout</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]">
19<path d="M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg></button></div></div>
19<script src="https://assets.react-photo-album.com/_next/static/immutable/chunks/36k8in9a291ok.js" id="_R_" async=""></script>
19<script>(self.__next_f=self.__next_f||[]).push([0])</script>
19<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\":[\"\",\"examples\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"examples\",{\"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
19itle\":\"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\":\"Examples | React Photo Album\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Learn how to use React Photo Album by exploring basic examples with live demos, source code, and ready-to-use code sandboxes.\"}],[\"$\",\"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/examples\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:title\",\"content\":\"React Photo Album | Examples\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:description\",\"content\":\"Learn how to use React Photo Album by exploring basic examples with live demos, source code, and ready-to-use code sandboxes.\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:url\",\"content\":\"https://react-photo-album.com/examples\"}],[\"$\",\"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 | Examples\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:description\",\"content\":\"Learn how to use React Photo Album by exploring basic examples with live demos, source code, and ready-to-use code sandboxes.\"}],[\"$\",\"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>
19<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\"]\n18:I[80853,[\"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\":\"Examples\",\"children\":[\"Examples\",[\"$\",\"a\",null,{\"href\":\"#Examples\",\"title\":\"Direct link to Examples\",\"aria-label\":\"Direct link to Examples\"}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Learn how to use \",[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/\",\"prefetch\":false,\"children\":\"React Photo Album\"}],\" by exploring basic examples with live\\ndemos, source code, and ready-to-use code sandboxes.\"]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/examples/rows\",\"prefetch\":false,\"children\":[\"$\",\"strong\",null,{\"children\":\"Rows Layout\"}]}],\" - rows layout example\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/examples/columns\",\"prefetch\":false,\"children\":[\"$\",\"strong\",null,{\"children\":\"Columns Layout\"}]}],\" - columns layout example\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/examples/masonry\",\"prefetch\":false,\"children\":[\"$\",\"strong\",null,{\"children\":\"Masonry Layout\"}]}],\" - masonry layout example\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/examples/playground\",\"prefetch\":false,\"children\":[\"$\",\"strong\",null,{\"children\":\"Playground\"}]}],\" - interactive playground to test\\nvarious parameters live\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/examples/customization\",\"prefetch\":false,\"children\":[\"$\",\"strong\",null,{\"children\":\"Customization\"}]}],\" - an example showcasing custom\\nrender functions and various photo album props\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/examples/sortable-gallery\",\"prefetch\":false,\"children\":[\"$\",\"strong\",null,{\"children\":\"Sortable Gallery\"}]}],\" - an example of a sortable\\ngallery built with \",[\"$\",\"a\",null,{\"ref\":\"$undefined\",\"href\":\"https://dndkit.com/\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"children\":\"@dnd-kit\"}]]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/examples/nextjs\",\"prefetch\":false,\"children\":[\"$\",\"strong\",null,{\"children\":\"Next.js Image\"}]}],\" - Next.js Image component\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"href\":\"/examples/lightbox\",\"prefetch\":false,\"children\":[\"$\",\"strong\",null,{\"children\":\"Lightbox\"}]}],\" - photo gallery with lightbox built with\\n\",[\"$\",\"a\",null,{\"ref\":\"$undefined\",\"href\":\"https://yet-another-react-lightbox.com/\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"children\":\"yet-another-react-lightbox\"}]]}],\"\\n\"]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"SourceCode\",\"children\":[\"Source Code\",[\"$\",\"a\",null,{\"href\":\"#SourceCode\",\"title\":\"Direct link to Source Code\",\"aria-label\":\"Direct link to Source Code\"}]]}],\"\\n\",[\"$\",\"$L18\",null,{\"href\":\"https://github.com/igordanchenko/react-photo-album/tree/main/examples/\"}]]\n"])</script>
19</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.