{"id":22109257,"url":"https://github.com/matt-dunn/react-wireframes","last_synced_at":"2025-07-25T06:31:19.906Z","repository":{"id":40288750,"uuid":"247129577","full_name":"matt-dunn/react-wireframes","owner":"matt-dunn","description":"Wireframe tooling for React","archived":false,"fork":false,"pushed_at":"2022-12-10T21:31:26.000Z","size":16955,"stargazers_count":5,"open_issues_count":12,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-02-27T18:47:55.177Z","etag":null,"topics":["emotionjs","javascript","react","typescript","wireframing"],"latest_commit_sha":null,"homepage":"https://matt-dunn.github.io/react-wireframes","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matt-dunn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-13T17:44:20.000Z","updated_at":"2021-07-02T17:38:49.000Z","dependencies_parsed_at":"2023-01-26T11:31:37.062Z","dependency_job_id":null,"html_url":"https://github.com/matt-dunn/react-wireframes","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matt-dunn%2Freact-wireframes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matt-dunn%2Freact-wireframes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matt-dunn%2Freact-wireframes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matt-dunn%2Freact-wireframes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matt-dunn","download_url":"https://codeload.github.com/matt-dunn/react-wireframes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227528678,"owners_count":17783914,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["emotionjs","javascript","react","typescript","wireframing"],"created_at":"2024-12-01T09:30:38.899Z","updated_at":"2024-12-01T09:31:09.158Z","avatar_url":"https://github.com/matt-dunn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"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)\n\n[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=matt-dunn_react-wireframes\u0026metric=coverage)](https://sonarcloud.io/dashboard?id=matt-dunn_react-wireframes)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=matt-dunn_react-wireframes\u0026metric=alert_status)](https://sonarcloud.io/dashboard?id=matt-dunn_react-wireframes)\n[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=matt-dunn_react-wireframes\u0026metric=vulnerabilities)](https://sonarcloud.io/dashboard?id=matt-dunn_react-wireframes)\n[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=matt-dunn_react-wireframes\u0026metric=sqale_rating)](https://sonarcloud.io/dashboard?id=matt-dunn_react-wireframes)\n[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=matt-dunn_react-wireframes\u0026metric=reliability_rating)](https://sonarcloud.io/dashboard?id=matt-dunn_react-wireframes)\n[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=matt-dunn_react-wireframes\u0026metric=security_rating)](https://sonarcloud.io/dashboard?id=matt-dunn_react-wireframes)\n\nReact component to annotate your components — useful for prototypes and proof of concepts.\n\n---\n\n[Storybook](https://matt-dunn.github.io/react-wireframes/storybook/?path=/story/)\n\n[Demo](https://matt-dunn.github.io/react-wireframes/)\n\n[CodePen](https://codepen.io/matt-j-dunn/pen/NWqZmQY?editors=0010)\n\n---\n\n## Getting Started\n\n```sh\nnpm install --save @matt-dunn/react-wireframes\n```\n\nor\n\n```sh\nyarn add @matt-dunn/react-wireframes\n```\n\n### Annotate a component\n\n```jsx\nconst AnnotatedMyComponent = withWireframeAnnotation({\n    title: \"MyComponent title\",\n    description: \"MyComponent description.\",\n})(MyComponent);\n```\n\n### Wrap your application with the container\n\n```jsx\n  \u003cWireframeContainer\u003e\n    \u003cAnnotatedMyComponent /\u003e\n    {/*...application*/}\n  \u003c/WireframeContainer\u003e\n```\n\n## API\n\nSee [Storybook](https://matt-dunn.github.io/react-wireframes/storybook/?path=/story/).\n\n## Example Implementation\n\nThis example shows a set of components annotated using ```react-wireframes```. \n\n![](./docs/assets/react-wireframes.gif)\n\n\n## Simple bare-bones example\n\n```jsx\nimport ReactDOM from \"react-dom\";\nimport React from \"react\";\n\nimport {\n    WireframeContainer, withWireframeAnnotation,\n} from \"@matt-dunn/react-wireframes\";\n\nconst MyComponent = () =\u003e \u003carticle\u003eHello world\u003c/article\u003e;\n\nconst AnnotatedMyComponent = withWireframeAnnotation({\n    title: \"MyComponent title\",\n    description: \"MyComponent description.\",\n})(MyComponent);\n\nconst app = (\n  \u003cWireframeContainer\u003e\n      \u003cAnnotatedMyComponent /\u003e\n  \u003c/WireframeContainer\u003e\n);\n\nReactDOM.render(\n  app,\n  document.getElementById(\"app\"),\n);\n```\n\n## License\n\nThe MIT License (MIT) Copyright (c) 2020 Matt Dunn\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatt-dunn%2Freact-wireframes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatt-dunn%2Freact-wireframes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatt-dunn%2Freact-wireframes/lists"}