https://github.com/matt-dunn/react-wireframes

Wireframe tooling for React
https://github.com/matt-dunn/react-wireframes

emotionjs javascript react typescript wireframing

Last synced: 12 months ago
JSON representation

Wireframe tooling for React

• Host: GitHub
• URL: https://github.com/matt-dunn/react-wireframes
• Owner: matt-dunn
• License: mit
• Created: 2020-03-13T17:44:20.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T21:31:26.000Z (over 3 years ago)
• Last Synced: 2023-02-27T18:47:55.177Z (over 3 years ago)
• Topics: emotionjs, javascript, react, typescript, wireframing
• Language: TypeScript
• Homepage: https://matt-dunn.github.io/react-wireframes
• Size: 16.2 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-wireframes [![Build Status](https://travis-ci.org/matt-dunn/react-wireframes.svg?branch=master)](https://travis-ci.org/matt-dunn/react-wireframes) [![npm version](https://badge.fury.io/js/%40matt-dunn%2Freact-wireframes.svg)](https://www.npmjs.com/package/@matt-dunn/react-wireframes)

[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=matt-dunn_react-wireframes&metric=coverage)](https://sonarcloud.io/dashboard?id=matt-dunn_react-wireframes)

[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=matt-dunn_react-wireframes&metric=alert_status)](https://sonarcloud.io/dashboard?id=matt-dunn_react-wireframes)

[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=matt-dunn_react-wireframes&metric=vulnerabilities)](https://sonarcloud.io/dashboard?id=matt-dunn_react-wireframes)

[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=matt-dunn_react-wireframes&metric=sqale_rating)](https://sonarcloud.io/dashboard?id=matt-dunn_react-wireframes)

[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=matt-dunn_react-wireframes&metric=reliability_rating)](https://sonarcloud.io/dashboard?id=matt-dunn_react-wireframes)

[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=matt-dunn_react-wireframes&metric=security_rating)](https://sonarcloud.io/dashboard?id=matt-dunn_react-wireframes)

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

---

[Storybook](https://matt-dunn.github.io/react-wireframes/storybook/?path=/story/)

[Demo](https://matt-dunn.github.io/react-wireframes/)

[CodePen](https://codepen.io/matt-j-dunn/pen/NWqZmQY?editors=0010)

---

## Getting Started

```sh

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

```

or

```sh

yarn add @matt-dunn/react-wireframes

```

### Annotate a component

```jsx

const AnnotatedMyComponent = withWireframeAnnotation({

    title: "MyComponent title",

    description: "MyComponent description.",

})(MyComponent);

```

### Wrap your application with the container

```jsx

  

    

    {/*...application*/}

  

```

## API

See [Storybook](https://matt-dunn.github.io/react-wireframes/storybook/?path=/story/).

## Example Implementation

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

![](./docs/assets/react-wireframes.gif)

## Simple bare-bones example

```jsx

import ReactDOM from "react-dom";

import React from "react";

import {

    WireframeContainer, withWireframeAnnotation,

} from "@matt-dunn/react-wireframes";

const MyComponent = () => Hello world;

const AnnotatedMyComponent = withWireframeAnnotation({

    title: "MyComponent title",

    description: "MyComponent description.",

})(MyComponent);

const app = (

  

      

  

);

ReactDOM.render(

  app,

  document.getElementById("app"),

);

```

## License

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