@clikvn/react-gallery-viewer

To develop

Available Scripts

In the project directory, you run: Start storybook

yarn storybook

Try to build js

yarn rollup

Public to npmjs

yarn deploy

Runs the app in the development mode.
Open http://localhost:6006 to view it in the browser.

To use

Installation

  npm i @clikvn/react-gallery-viewer

or

  yarn add @clikvn/react-gallery-viewer

Usage/Examples

Add tag script on document file (to use AR)

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js" ></script>

import { GalleryViewer } from "@clikvn/react-gallery-viewer";
import "@clikvn/react-gallery-viewer/dist/cjs/style.css";

function App() {
  const items = [
    {
      code: "1",
      type: "virtualTour",
      url: "https://ci-virtualtour.clik.vn/vi/tour/copy-tour-gevexlwnpt74-133512?scenario=SCENE",
    },
    {
      code: "2",
      type: "webRotate",
      webRotateCode: "WRT_HJM27D22ZZ76",
      url: "https://ci-webrotate360-client.clik.vn",
      title:
        "Grande dinning table 4. Grande dinning table 4. Grande dinning table 4",
      description:
        "The Japandi moodboard is presented, featuring a serene blend of Japanese minimalism, featuring a serene blend of Japanese minimalism",
    },
    {
      code: "3",
      type: "ar",
      url: "https://clikpublic.s3.ap-southeast-1.amazonaws.com/test/Hay-Can-2-Seater.glb",
      iosUrl:
        "https://clikpublic.s3.ap-southeast-1.amazonaws.com/test/Hay-Can-2-Seater.usdz",
      autoRotate: true,
      cameraControls: true,
      ar: true,
      title:
        "Grande dinning table 4. Grande dinning table 4. Grande dinning table 4",
      description:
        "The Japandi moodboard is presented, featuring a serene blend of Japanese minimalism, featuring a serene blend of Japanese minimalism",
    },
    {
      code: "4",
      type: "image",
      url: "https://cdn3.clik.vn/clikvirtualtour/prod/item/1118/collections/627/Int_Sofa_D27DUXR2PM26.jpg",
      title: "Image 1",
    },
    {
      code: "5",
      type: "video",
      url: "https://www.w3schools.com/tags/movie.mp4",
    },
    {
      code: "6",
      type: "image",
      url: "https://cdn3.clik.vn/clikvirtualtour/prod/item/1118/collections/627/White_Sofa_4F9HVXR2PM26.jpg",
      title: "Image 2",
    },
    {
      code: "7",
      type: "video",
      url: "https://www.w3schools.com/tags/movie.mp4",
    },
    {
      code: "8",
      type: "image",
      url: "https://cdn3.clik.vn/clikvirtualtour/prod/item/1118/collections/627/Int_Sofa_D27DUXR2PM26.jpg",
      title: "Image 3",
    },
  ]

  const [selected, setSelected] = useState(items[5]);

  return <GalleryViewer
            selection={selected}
            onSelect={setSelected}
            items={items}
          />
}

Features

• GalleryViewer gitlab