@wirewire/react-exhibition v1.113.1

React Exhibition

Helpers to work with interactive exhibitions build in react and next.js.

Features

• API interface
• LanguageSwitcher
• Mdx Components
• TouchElement
• UniPiControl
• Preview
• Timeout Usage
• Design Tokens (to be moved)

Local API should search for

Endpoint (https://osb.exhibitions.wirewire.de/posts/hartheim) Search for all URLs and download Search for all UUIDs and download them

CSS

Import the css in your app.tsx.

import "@wirewire/react-exhibition/build/bundle.css";

LanguageSwitcher

Allows you to switch between languages using next-18next.

import { LanguageSwitcher } from "@wirewire/react-exhibition";

<LanguageSwitcher className={styles.className} />;

Preview

Wrap your application with

import { Preview } from "@wirewire/react-exhibition";

<Preview>Your application</Preview>;

Inside your application you can now use the usePreview() hook to set and get the state of the preview.

import { usePreview } from "@wirewire/react-exhibition";

const {
  preview,
  setPreview,
  lastInteraction,
  setLastInteraction,
  setLastClearInteraction,
  lastClearInteraction,
} = usePreview();

Touchelement

Shows a TouchElement which allows you to trigger an action by either a touch Handler or hightlight the element in Preview.

import { usePreview } from "@wirewire/react-exhibition";

<TouchElement className={styles.icon} onClick={() => isInView(i)}>
  Content
</TouchElement>;

useIsDesktop

API

Endpoints to download data

NEXT_PUBLIC_KEYSTONE_SECRET=XXXXXX

MDX

Use mdx components inside the markdown renderer

import { components } from "@wirewire/react-exhibition/mdx";

<MDXRemote {...entry.mdxSource} components={components} />;

LiveControl

<LiveControl article={props.article}>

const liveControl = useLiveControl();
const { update, data, setDisableUpdate } = liveControl;

const updateProjection = ({ layers, isEnd }) => {
setDisableUpdate(true);
update({ id: article.id, data: { projection: layers }, isEnd });
};

if (!article) return null;

const articleLive = liveControl.article || article;

return (
<>
<LanguageSwitcher className={styles.languageSwitcher} />
<PreviewSwitcher />
<Projection
        data={articleLive?.json?.projection}
        edit={articleLive?.json?.projectionEdit}
        enabled={true}
        onChange={updateProjection}
      >

<>

<UniPiControl url="ws://192.168.252.204:8007">

Refresh browser

Allows you to wait for the browser container until it is available and then refresh the page.

{
  "open": "refresh-browser"
}

Example starting a next.js application and refreshing the page when browser is available:

{
  "start": "npm run open && next start -p 80",
  "open": "sleep 10 && refresh-browser &"
}

Icons

Includes some icons:

• ArrowLeft
• ArrowRight
• AudioSync
• Cross
• Hand
• HandFull
• Menu