dferber90 / playroom-clickable-prototypes Goto Github PK

Create clickable prototypes in Playroom.

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

• Installation
• Usage
• Components
  • Stage
  • Frame
  • Trigger

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";

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.

The general stage. Wrap this component around your frames.

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

The individual frames of your prototype.

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

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