playroom-clickable-prototypes

Clickable Prototypes for Playroom

Usage no npm install needed!

<script type="module">
  import playroomClickablePrototypes from 'https://cdn.skypack.dev/playroom-clickable-prototypes';
</script>

README

Create clickable prototypes in Playroom.

This package lets you create clickable prototypes in your Playroom. It's intended for prototyping purposes.

Demo

Installation

Install the package

# npm
npm install playroom-clickable-prototypes

# yarn
yarn add playroom-clickable-prototypes

Then open your Playroom components file and add

export { Stage, Trigger, Frame } from "playroom-clickable-prototypes";

Usage

Use <Stage initial="frame-id" /> to define a stage and an initial state.

A stage can have different frames. Each <Frame id="frame-id" /> needs to have an id. Only the active frame will be shown.

To create links between states, you can wrap any element in a <Trigger target="frame-id" />.

<Stage initial="step1">

  <Frame id="step1">
    <p>First step</p>
    <Trigger target="step2">
      <button type="button">Continue</button>
    </Trigger>
  </Frame>

  <Frame id="step2">
    <p>Second step</p>
    <Trigger target="step1">
      <button type="button">Back</button>
    </Trigger>
  </Frame>

</Stage>

You can press the escape key twice to highlight all clickable areas.

After transitioning away from the initial frame, you can press the Escape key thrice to go back to the initial frame.

Components

Stage

The general stage. Wrap this component around your frames.

  • initial (string, required): The id of the frame to be shown initially

Frame

The individual frames of your prototype.

  • id (string, required): The id of this frame

Trigger

The triggers which transition to different frames when clicked. Wrap this around your buttons or links.

  • target (string, required): The id of the frame this trigger links to