{"id":27992076,"url":"https://github.com/rough-stuff/wired-elements-react","last_synced_at":"2025-05-08T17:57:01.073Z","repository":{"id":49177514,"uuid":"361629865","full_name":"rough-stuff/wired-elements-react","owner":"rough-stuff","description":"React wrappers for wired-elements","archived":false,"fork":false,"pushed_at":"2023-04-03T22:50:48.000Z","size":14,"stargazers_count":42,"open_issues_count":8,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-29T05:26:46.930Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/rough-stuff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":"pshihn","open_collective":"rough"}},"created_at":"2021-04-26T05:37:35.000Z","updated_at":"2025-03-22T22:29:50.000Z","dependencies_parsed_at":"2022-08-26T03:00:52.033Z","dependency_job_id":null,"html_url":"https://github.com/rough-stuff/wired-elements-react","commit_stats":{"total_commits":8,"total_committers":2,"mean_commits":4.0,"dds":0.375,"last_synced_commit":"e79e0d8640203781cf091ae6d21be924fd3b67ed"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rough-stuff%2Fwired-elements-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rough-stuff%2Fwired-elements-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rough-stuff%2Fwired-elements-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rough-stuff%2Fwired-elements-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rough-stuff","download_url":"https://codeload.github.com/rough-stuff/wired-elements-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252979311,"owners_count":21835028,"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":[],"created_at":"2025-05-08T17:57:00.248Z","updated_at":"2025-05-08T17:57:01.067Z","avatar_url":"https://github.com/rough-stuff.png","language":"TypeScript","funding_links":["https://github.com/sponsors/pshihn","https://opencollective.com/rough"],"categories":[],"sub_categories":[],"readme":"# wired-elements-react\nReact wrappers for [wired-elements](https://wiredjs.com). Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look. \n\nWired Elements ([github](https://github.com/rough-stuff/wired-elements)) are implemented as web components. Though you can use these Web Components directly in React (like, [here](https://codesandbox.io/s/xrll5wyl8w)), and in any framework; React's design make them a bit non-trivial to use at times. ([More here](https://custom-elements-everywhere.com/#react)).\n\nThis project wraps the web components in React components to make them easy to use. This is done via [@lit-labs/react](https://github.com/lit/lit/tree/main/packages/labs/react) made by [Lit](https://lit.dev/).\n\n## Usage: \n\nAdd to your project:\n```\nnpm i wired-elements-react\n```\n\nAnd use then in your JSX:\n```javascript\nimport { WiredButton, WiredInput, WiredCard } from \"wired-elements-react\";\n\nfunction App() {\n  let textInput = React.createRef();\n\n  function handleClick() {\n    window.alert(`Hello ${textInput.current.value}!`);\n  }\n\n  return (\n    \u003cWiredCard elevation=\"5\"\u003e\n      \u003ch1\u003ewired-elements demo\u003c/h1\u003e\n      \u003csection\u003e\n        \u003cWiredInput placeholder=\"your name\" /\u003e\n        \u003cWiredButton elevation={2} onClick={handleClick}\u003e\n          Submit\n        \u003c/WiredButton\u003e\n      \u003c/section\u003e\n    \u003c/WiredCard\u003e\n  );\n}\n```\n\n## Example\nHere's a basic example on CodeSandbox: [Open sandbox](https://codesandbox.io/s/react-wrapper-for-wired-elements-vid1j?file=/src/index.js)\n\n## Documentation\n\nDocumentation on individual component can be [found here](https://github.com/rough-stuff/wired-elements/tree/master/docs).\n\n## License\n[MIT License](https://github.com/rough-stuff/wired-elements/blob/master/LICENSE) (c) [Preet Shihn](https://twitter.com/preetster)\n\n## Support Rough Stuff\n\nBecome a financial contributor and help us maintain the Rough libraries like this one. [Open Collective](https://opencollective.com/rough) or [Github Sponsor](https://github.com/sponsors/pshihn)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frough-stuff%2Fwired-elements-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frough-stuff%2Fwired-elements-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frough-stuff%2Fwired-elements-react/lists"}