Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/noderaider/react-dom-inject
Binds an HTML element by selector to a ReactElement and renders to a DOM tree (with redux injection)
https://github.com/noderaider/react-dom-inject
dom-tree html-element legacy-application reactelement redux-injection selector
Last synced: about 1 month ago
JSON representation
Binds an HTML element by selector to a ReactElement and renders to a DOM tree (with redux injection)
- Host: GitHub
- URL: https://github.com/noderaider/react-dom-inject
- Owner: noderaider
- License: mit
- Created: 2016-03-27T02:17:00.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-04-09T20:59:39.000Z (almost 9 years ago)
- Last Synced: 2024-12-20T08:17:40.710Z (about 1 month ago)
- Topics: dom-tree, html-element, legacy-application, reactelement, redux-injection, selector
- Language: JavaScript
- Homepage: https://noderaider.github.io/react-dom-inject/
- Size: 53.7 KB
- Stars: 18
- Watchers: 4
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-dom-inject
Binds an HTML element by selector to a ReactElement and renders to a DOM tree (with redux injection)## Install
`npm i -S react-dom-inject`
## Usage
This 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.
##### index.html
```html
Some inner HTML to be injected here```
##### MyReactElement.jsx
```jsx
import React from 'react'
import ReactDOMInject from 'react-dom-inject'/**
* ReactElement to be injected.
* This could be a regular class element but for this example I'm using an inline function style element.
*/
export const MyReactElement = props => {
const { title, color, defaultVisibility, children, description } = props
const style = { color
, display: defaultVisibility ? 'block' : 'none'
}
return (
{title}
{children}
)
}export const MyReactElementDOM = ReactDOMInject(MyReactElement)
```#### render.js
```js
import { MyReactElementDOM } from './MyReactElement'...
MyReactElementDOM.render('#my-element'[, { description: 'This is a way to pass properties to the element at render time.'[, state: reduxState ] } ])
```