Getting Started with Solid

VistaView provides a useVistaView hook for SolidJS applications.

Installation

npm

npm install vistaview

yarn

yarn add vistaview

pnpm

pnpm add vistaview

bun

bun add vistaview

Basic Usage

import { useVistaView } from 'vistaview/solid';
import 'vistaview/style.css';

function Gallery() {
  const id = 'gallery-' + Math.random().toString(36).slice(2);
  const vista = useVistaView({
    elements: `#${id} a`,
  });

  return (
    <div id={id}>
      <a href="/images/photo1-full.jpg">
        <img src="/images/photo1-thumb.jpg" alt="Photo 1" />
      </a>
      <a href="/images/photo2-full.jpg">
        <img src="/images/photo2-thumb.jpg" alt="Photo 2" />
      </a>
    </div>
  );
}

With Control Buttons

import { useVistaView } from 'vistaview/solid';
import 'vistaview/style.css';

function Gallery() {
  const id = 'gallery-' + Math.random().toString(36).slice(2);
  const vista = useVistaView({
    elements: `#${id} a`,
  });

  return (
    <>
      <div id={id}>
        <a href="/images/full.jpg">
          <img src="/images/thumb.jpg" alt="Photo" />
        </a>
      </div>
      <button onClick={() => vista.open(0)}>Open Gallery</button>
      <button onClick={() => vista.next()}>Next</button>
      <button onClick={() => vista.prev()}>Previous</button>
    </>
  );
}

With Options

import { useVistaView } from 'vistaview/solid';
import type { VistaOpt } from 'vistaview';
import 'vistaview/style.css';

// Define options outside component to prevent recreation on every render
const options: VistaOpt = {
  maxZoomLevel: 3,
  preloads: 2,
  animationDurationBase: 400,
  onOpen: (vistaView) => console.log('Gallery opened'),
  onClose: (vistaView) => console.log('Gallery closed'),
};

function Gallery() {
  const id = 'gallery-' + Math.random().toString(36).slice(2);
  const vista = useVistaView({
    elements: `#${id} a`,
    ...options,
  });

  return (
    <div id={id}>
      <a href="/images/photo1-full.jpg">
        <img src="/images/photo1-thumb.jpg" alt="Photo 1" />
      </a>
      <a href="/images/photo2-full.jpg">
        <img src="/images/photo2-thumb.jpg" alt="Photo 2" />
      </a>
    </div>
  );
}

With Extensions

import { useVistaView } from 'vistaview/solid';
import { download } from 'vistaview/extensions/download';
import 'vistaview/style.css';

function Gallery() {
  const id = 'gallery-' + Math.random().toString(36).slice(2);
  const vista = useVistaView({
    elements: `#${id} a`,
    controls: {
      topRight: ['zoomIn', 'zoomOut', 'download', 'close'],
    },
    extensions: [download()],
  });

  return (
    <div id={id}>
      <a href="/images/photo1.jpg">
        <img src="/images/photo1-thumb.jpg" alt="Photo 1" />
      </a>
    </div>
  );
}

Reactive Updates

VistaView works with Solid’s reactive system:

import { createSignal } from 'solid-js';
import { useVistaView } from 'vistaview/solid';
import 'vistaview/style.css';

function Gallery() {
  const [images, setImages] = createSignal([
    { src: '/images/photo1.jpg', alt: 'Photo 1' },
    { src: '/images/photo2.jpg', alt: 'Photo 2' },
  ]);

  const id = 'gallery-' + Math.random().toString(36).slice(2);
  const vista = useVistaView({
    elements: `#${id} a`,
  });

  return (
    <div id={id}>
      {images().map((img) => (
        <a href={img.src}>
          <img src={img.src} alt={img.alt} />
        </a>
      ))}
    </div>
  );
}

SolidStart

VistaView works with SolidStart. Make sure to use client-side rendering:

import { lazy } from 'solid-js';

const Gallery = lazy(() => import('./Gallery'));

function Page() {
  return (
    <ClientOnly>
      <Gallery />
    </ClientOnly>
  );
}

Next Steps

• Explore configuration options
• Learn about extensions
• Customize the styling