Nozzle Piping Mismatch

    @matt-dunn/react-wireframes
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.17 • Public • Published

    @matt-dunn/react-wireframes Actions Status NPM Package

    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

    Install

    npm i @matt-dunn/react-wireframes

    DownloadsWeekly Downloads

    102

    Version

    2.1.17

    License

    MIT

    Unpacked Size

    4.2 MB

    Total Files

    51

    Last publish

    Collaborators

    • matt.j.dunn