{"id":13521415,"url":"https://github.com/iamdustan/react-hardware","last_synced_at":"2025-05-16T17:03:10.651Z","repository":{"id":31994900,"uuid":"35565534","full_name":"iamdustan/react-hardware","owner":"iamdustan","description":"A React renderer for Hardware.","archived":false,"fork":false,"pushed_at":"2023-01-03T17:54:21.000Z","size":1404,"stargazers_count":804,"open_issues_count":26,"forks_count":32,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-04-12T15:58:50.765Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://iamdustan.com/react-hardware","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamdustan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-13T18:01:21.000Z","updated_at":"2025-03-21T03:07:25.000Z","dependencies_parsed_at":"2022-08-26T09:01:41.293Z","dependency_job_id":null,"html_url":"https://github.com/iamdustan/react-hardware","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamdustan%2Freact-hardware","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamdustan%2Freact-hardware/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamdustan%2Freact-hardware/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamdustan%2Freact-hardware/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamdustan","download_url":"https://codeload.github.com/iamdustan/react-hardware/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254573589,"owners_count":22093731,"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":"2024-08-01T06:00:34.116Z","updated_at":"2025-05-16T17:03:10.602Z","avatar_url":"https://github.com/iamdustan.png","language":"JavaScript","funding_links":[],"categories":["Hardware","JavaScript","Libraries and Plugins"],"sub_categories":["Robot Programming Plugins"],"readme":"# React Hardware\n\n[![Build Status](https://travis-ci.org/iamdustan/react-hardware.svg?branch=master)](https://travis-ci.org/iamdustan/react-hardware)\n\nReact Hardware enables you to build firmata-based hardware applications using a\nconsistent developer experience based on JavaScript and React. The focus of\nReact Hardware is on developer efficiency across all the platforms you care\nabout - learn once, write anywhere.\n\n**React Hardware is a IoT and Robotics programming framework developed by Dustan\nKasten. Being based on firmata, it is capable of providing feature parity with\nalternative tools such as Johnny-Five.**\n\nNote that this is currently alpha software and hasn’t been tested or have many\nfeatures implemented. It currently supports firmata’s `digitalWrite` and\n`analogWrite` methods. Full support for firmata is coming including an event\nsystem to receive feedback from the board and manipulate state as a result of\nthat.\n\n## Hello World\n\nThe \"Hello World\" program of microcontrollers is to \"blink an LED\". The\nfollowing code demonstrates how this is done naively with React Hardware and how\nReact’s programming model brings composability to the hardware world.\n\n``` javascript\nimport React from 'react';\nimport ReactHardware, {Led} from 'react-hardware';\n\nconst HIGH = 255;\nconst LOW = 0;\n\nclass Application extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {value: 0};\n    this._timer = null;\n  }\n\n  componentDidMount() {\n    this._timer = setInterval(_ =\u003e (\n      this.setState(prevState =\u003e ({value: prevState.value === HIGH ? LOW : HIGH}))\n    ), this.props.interval);\n  }\n\n  componentWillUnmount() {\n    clearInterval(this._timer);\n    this._timer = null;\n  }\n\n  render() {\n    return (\n      \u003cLed pin={10} value={this.state.value} /\u003e\n    );\n  }\n}\n\nvar PORT = '/dev/tty.usbmodem1411';\nReactHardware.render(\u003cApplication interval={1000} /\u003e, PORT);\n```\n\nWhile this is unquestionably more code than it’s Johnny-Five or Sketch\nequivalents, this now gives you the ability to extract the parts of your board\ninto self-contained components and compose these together. In this application\nwe introduced the concept of a flashing LED, hard-coded naively into the global\nstate. Let’s now extract the idea of a flashing LED into something we can share\nwith our team or even on npm.\n\n``` jsx\nimport React from 'react';\nimport ReactHardware, {Board, Led} from 'react-hardware';\n\nconst HIGH = 255;\nconst LOW = 0;\n\nclass FlashingLed extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {value: 0};\n    this._timer = null;\n    this.defaultProps = {\n      interval: 1000,\n    };\n  }\n\n  componentDidMount() {\n    this._timer = setInterval(_ =\u003e (\n      this.setState(prevState =\u003e ({value: prevState.value === HIGH ? LOW : HIGH}))\n    ), this.props.interval);\n  }\n\n  componentWillUnmount() {\n    clearInterval(this._timer);\n    this._timer = null;\n  }\n\n  render() {\n    return (\n      \u003cLed {...this.props} value={this.state.value} /\u003e\n    );\n  }\n}\n\nclass Application extends React.Component {\n  render() {\n    return (\n      \u003cBoard\u003e\n        \u003cFlashingLed pin={9} /\u003e\n        \u003cFlashingLed pin={10} /\u003e\n        \u003cFlashingLed pin={11} /\u003e\n        \u003cFlashingLed pin={12} /\u003e\n      \u003c/Board\u003e\n    );\n  }\n}\n\nvar PORT = '/dev/tty.usbmodem1411';\nReactHardware.render(\u003cApplication /\u003e, PORT);\n```\n\n## Community\n\nThere should be #react-hardware channels created on both\nhttps://reactiflux.com/ and IRC.\n\n## Contributing\n\nThe codebase is written in es6 with (sporadic) types and compiled with babel.\nFollow the existing style when creating changes. Eslint and the flow type\nchecker will be set up shortly. While the project is under heavy active\ndevelopment it would be useful to make an issue discussing your change before\nmaking a PR to ensure we aren’t duplicating effort.\n\n## License\n\nCopyright (c) 2015 Dustan Kasten | dustan.kasten@gmail.com\nLicensed under the MIT license.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamdustan%2Freact-hardware","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamdustan%2Freact-hardware","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamdustan%2Freact-hardware/lists"}