@wirewire/react-exhibition v1.117.0

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)

CSS

Import the css in your app.tsx.

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

i18n

Contains helpers for react-i18next.

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();

Reset the view after a specific period of time

const { preview, lastClearInteraction } = usePreview({ reset: [index] });

useEffect(() => {
  router.push("/");
}, [lastClearInteraction]);

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. It will automatically switch between the online and offline version (if NEXT_PUBLIC_DOWNLOADER_URL exists).

import {
  getArticles,
  getArticle,
  getArticleTranslation,
  getFile,
  updateArticle,
  getTranslationsByNamespace,
} from "@wirewire/react-exhibition";

const articles = await getArticles();

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

import {UniPiControl} from "@wirewire/react-exhibition";
<UniPiControl websocketUrl="ws://192.168.252.204:8007">

React to any input via useUniPiControl hook

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

const { messages } = useUniPiControl({
  onChange: (data) => {
    if (data.key === "1") {
      routes.push(`/`);
    }
  },
});

Use UniPiButton to externally control any input.

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

<UniPiButton
  active // if enabled
  pin="2.14" // The pin used
  onPress={() => console.log("button pressed")}
>
  <Button>This is a button controlled by UniPi</Button>
</UniPiButton>;

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 used across the stations:

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