@wirewire/react-exhibition
v1.117.0
Published
Helpers to work with interactive exhibitions build in [react](https://react.dev) and [next.js](https://nextjs.org/).
Downloads
123
Readme
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