{"id":13725364,"url":"https://github.com/alexanderson1993/react-dmx","last_synced_at":"2025-07-08T19:09:23.840Z","repository":{"id":78681167,"uuid":"117051722","full_name":"alexanderson1993/react-dmx","owner":"alexanderson1993","description":"Render React components to DMX light systems.","archived":false,"fork":false,"pushed_at":"2018-03-24T20:09:50.000Z","size":48,"stargazers_count":18,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-23T16:51:19.475Z","etag":null,"topics":["dmx","react","renderer"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/alexanderson1993.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-01-11T04:51:07.000Z","updated_at":"2023-12-07T14:27:54.000Z","dependencies_parsed_at":"2024-01-27T11:44:11.776Z","dependency_job_id":"4fb6d9ff-e6c6-4618-b44d-01a41c273a4d","html_url":"https://github.com/alexanderson1993/react-dmx","commit_stats":{"total_commits":10,"total_committers":2,"mean_commits":5.0,"dds":"0.19999999999999996","last_synced_commit":"044da3f0c55dbd1817f91a4858d19b3e89d917d7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alexanderson1993/react-dmx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderson1993%2Freact-dmx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderson1993%2Freact-dmx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderson1993%2Freact-dmx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderson1993%2Freact-dmx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexanderson1993","download_url":"https://codeload.github.com/alexanderson1993/react-dmx/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderson1993%2Freact-dmx/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264331248,"owners_count":23591960,"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":["dmx","react","renderer"],"created_at":"2024-08-03T01:02:20.618Z","updated_at":"2025-07-08T19:09:23.822Z","avatar_url":"https://github.com/alexanderson1993.png","language":"JavaScript","funding_links":[],"categories":["Hardware","JavaScript"],"sub_categories":[],"readme":"# React DMX\n\nRender React components to DMX light systems.\n\n## The problem\n\nControlling a handful of lights with DMX is pretty simple and straightforward. However, adding multiple lights or lights with multiple channels (RGB/WA+UV) makes things much more complicated. \n\n## This solution\n\nReact DMX lets you use React components and a special renderer to compose your lighting system just like you would a web app. With a simple `\u003clight\u003e` primitive, you can compose any kind of lighting system imaginable! And, since it's React, you have access to component lifecycle events, state, and reactive updates.\n\n## Installation\n\nThis module is distributed via [npm][npm]. It is designed to run only on Node systems, not browsers.\n\n```\nnpm install --save react-dmx\n```\n\nReact DMX uses [node-dmx][node-dmx] to send DMX commands to DMX controllers. You must manually install the drivers which node-dmx uses to send these commands. The [node-ftdi][node-ftdi] is recommended.\n\nSince React DMX is intended to be used with JSX, it is recomended you install Babel and the React babel preset as well:\n\n```\nnpm install --save-dev babel-cli babel-preset-env babel-preset-react\n```\n\nBabel's website has more in-depth [installation instructions][babel].\n\n## Usage\n\nCurrently, all React DMX instances must use a Universe as the root element. The following will set channel 0 to the maximum level (255):\n\n```javascript\nconst React = require('react');\nconst renderer = require('react-dmx');\n\nrender(\n  \u003cuniverse\n  name=\"my-universe\"\n  mode=\"enttec-usb-dmx-pro\"\n  port=\"/dev/cu.usbserial-A7ABR43S\"\u003e\n  \u003clight channel={0} intensity={1} /\u003e\u003e\n  \u003c/universe\u003e\n)\n```\n\n## API\n\n### `\u003cuniverse\u003e`\n\nProps:\n\n- **name**: The unique name of the DMX universe\n- **mode**: What driver the universe will use. This is based on the drivers available in the `node-dmx` package.\n- **port**: The DMX controller device\n\n### `\u003clight\u003e`\n\nProps:\n\n- **channel**: The DMX channel of the light\n- **intensity**: (0 - 1) How bright the light should be. This is converted to a number from 0 to 255\n\n## DMX Modes\n\n- null: a development driver that prints the universe to stdout\n- artnet: driver for EnttecODE\n- bbdmx: driver for [BeagleBone-DMX](https://github.com/boxysean/beaglebone-DMX)\n- dmx4all: driver for DMX4ALL devices like the \"NanoDMX USB Interface\"\n- enttec-usb-dmx-pro: a driver for devices using a Enttec USB DMX Pro chip like the \"DMXKing ultraDMX Micro\".\n- enttec-open-usb-dmx: driver for \"Enttec Open DMX USB\". This device is NOT recommended, there are known hardware limitations and this driver is not very stable. (If possible better obtain a device with the \"pro\" chip)\n- dmxking-utra-dmx-pro: driver for the DMXKing Ultra DMX pro interface. This driver support multiple universe specify the options with Port = A or B\n\n\n## LICENSE\n\nMIT\n\n[npm]: https://www.npmjs.com/\n[node-dmx]: https://github.com/wiedi/node-dmx\n[node-ftdi]:https://github.com/thomaschaaf/node-ftdi\n[babel]: https://babeljs.io/docs/setup/#installation","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexanderson1993%2Freact-dmx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexanderson1993%2Freact-dmx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexanderson1993%2Freact-dmx/lists"}