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

Component Approach (Recommended)

The VistaView component is the recommended way to use VistaView in Solid applications:

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

function Gallery() {
  return (
    <VistaView>
      <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>
    </VistaView>
  );
}

Hook Approach

Use the useVistaView hook when you need more control:

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

function Gallery() {
  const galleryId = 'vistaview-demo';
  const vista = useVistaView({
    elements: `#${galleryId} > a`,
  });

  return (
    <>
      <div id={galleryId}>
        <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>
    </>
  );
}

Imperative Control with Component

Access the API through the componentRef callback prop:

import { VistaView } from 'vistaview/solid';
import type { VistaInterface } from 'vistaview';
import 'vistaview/style.css';

function Gallery() {
  let vista: VistaInterface | null = null;
  let container: HTMLDivElement | undefined;

  return (
    <>
      <VistaView 
        componentRef={(api) => { 
          vista = api?.vistaView ?? null; 
          container = api?.container;
        }}
      >
        <a href="/images/full.jpg">
          <img src="/images/thumb.jpg" alt="Photo" />
        </a>
      </VistaView>

      <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