{"id":23318735,"url":"https://github.com/noderaider/react-dom-inject","last_synced_at":"2025-08-22T17:31:29.591Z","repository":{"id":65483359,"uuid":"54808573","full_name":"noderaider/react-dom-inject","owner":"noderaider","description":"Binds an HTML element by selector to a ReactElement and renders to a DOM tree (with redux injection)","archived":false,"fork":false,"pushed_at":"2016-04-09T20:59:39.000Z","size":55,"stargazers_count":18,"open_issues_count":1,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-12-20T08:17:40.710Z","etag":null,"topics":["dom-tree","html-element","legacy-application","reactelement","redux-injection","selector"],"latest_commit_sha":null,"homepage":"https://noderaider.github.io/react-dom-inject/","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/noderaider.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2016-03-27T02:17:00.000Z","updated_at":"2020-10-09T20:26:14.000Z","dependencies_parsed_at":"2023-01-25T11:15:15.065Z","dependency_job_id":null,"html_url":"https://github.com/noderaider/react-dom-inject","commit_stats":null,"previous_names":["cchamberlain/react-dom-inject"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noderaider%2Freact-dom-inject","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noderaider%2Freact-dom-inject/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noderaider%2Freact-dom-inject/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noderaider%2Freact-dom-inject/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/noderaider","download_url":"https://codeload.github.com/noderaider/react-dom-inject/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230619466,"owners_count":18254585,"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":["dom-tree","html-element","legacy-application","reactelement","redux-injection","selector"],"created_at":"2024-12-20T17:18:56.031Z","updated_at":"2024-12-20T17:19:00.869Z","avatar_url":"https://github.com/noderaider.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-dom-inject\nBinds an HTML element by selector to a ReactElement and renders to a DOM tree (with redux injection)\n\n\n## Install\n\n`npm i -S react-dom-inject`\n\n\n## Usage\n\nThis package was written to ease transition of legacy applications from older systems component by component. It can be used to rewrite legacy components as react components, and then inject them into placeholder elements in the legacy application without requiring them to be in the same tree as the new react application.\n\n\n##### index.html\n\n```html\n\u003c!-- ... --\u003e\n\n\u003c!-- All data properties will be camelCased and injected into the components props object. Any innerHTML will be injected into the children element of your react component. --\u003e\n\u003cdiv id=\"my-element\" data-title=\"My Element!\" data-color=\"#ff0000\" data-default-visibility=\"false\"\u003e\n  \u003cspan\u003eSome inner HTML to be injected here\u003c/span\u003e\n\u003c/div\u003e\n\n\u003c!-- ... --\u003e\n```\n\n\n##### MyReactElement.jsx\n\n```jsx\nimport React from 'react'\nimport ReactDOMInject from 'react-dom-inject'\n\n/**\n * ReactElement to be injected.\n * This could be a regular class element but for this example I'm using an inline function style element.\n */\nexport const MyReactElement = props =\u003e {\n  const { title, color, defaultVisibility, children, description } = props\n  const style = { color\n                , display: defaultVisibility ? 'block' : 'none'\n                }\n  return (\n    \u003cdiv style={style}\u003e\n      \u003ch1\u003e{title}\u003c/h1\u003e\n      \u003cdiv\u003e\n        {children}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport const MyReactElementDOM = ReactDOMInject(MyReactElement)\n```\n\n\n\n#### render.js\n\n```js\nimport { MyReactElementDOM } from './MyReactElement'\n\n...\n\nMyReactElementDOM.render('#my-element'[, { description: 'This is a way to pass properties to the element at render time.'[, state: reduxState ] } ])\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoderaider%2Freact-dom-inject","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoderaider%2Freact-dom-inject","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoderaider%2Freact-dom-inject/lists"}