@matt-dunn/react-wireframes

React component to annotate your components — useful for prototypes and proof of concepts.

e2e test results

Storybook

Demo

Docs

CodePen

Getting Started

npm install --save @matt-dunn/react-wireframes

or

yarn add @matt-dunn/react-wireframes

Annotate a component

const AnnotatedMyComponent = withWireframeAnnotation({
    title: "MyComponent title",
    description: "MyComponent description.",
})(MyComponent);

Wrap your application with the container

  <WireframeContainer>
    <AnnotatedMyComponent />
    {/*...application*/}
  </WireframeContainer>

API

See Storybook.

Example Implementation

This example shows a set of components annotated using react-wireframes.

Simple bare-bones example

import ReactDOM from "react-dom";
import React from "react";

import {
    WireframeContainer, withWireframeAnnotation,
} from "@matt-dunn/react-wireframes";

const MyComponent = () => <article>Hello world</article>;

const AnnotatedMyComponent = withWireframeAnnotation({
    title: "MyComponent title",
    description: "MyComponent description.",
})(MyComponent);

const app = (
  <WireframeContainer>
      <AnnotatedMyComponent />
  </WireframeContainer>
);

ReactDOM.render(
  app,
  document.getElementById("app"),
);

License

The MIT License (MIT) Copyright (c) 2020 Matt Dunn