❤
npm
Sign UpSign In

react-render-pages

2.0.4 • Public • Published

React render pages

Simple lib for help render components in a dom node with own props; alternative to build routes.

If your app it not a single page application, this package help you to use the same function for render react components like a page

Installation

npm install react-render-pages --save

How work

If you want render your component like a page you need to write something like this.

  document.addEventListener('DOMContentLoaded', () => {
    const element = document.getElementById(domId)
    if (!element) return false
    const props = JSON.parse(element.dataset.props) || {}
    ReactDOM.render(<HomeView {...props} />, element)
  })

This snippet help to render the component only if the dom node exists and use the data attribute to pass props to the component.

Usage

Example html

<html>
  <body>
    <div id="example-domId" data-props='{"example":"data"}'></div>
  </body>
  <script src="bundle.js"></script> 
</html>

renderIn

import { renderIn } from 'react-render-pages'
 
const Example = renderIn("example-domId", (props) =>
  <h1>This component render in "#example-domId"</h1>
))

render

Use es7 decorators

import { render } from 'react-render-pages'
 
@render("example-domId")
class Example extends React.Component {
  render() { return <h1>This component render in "#example-domId"</h1>}
}

ReactDOMRender

Core function to render components

import { ReactDOMRender } from 'react-render-pages'
 
class Example extends React.Component {
  render() { return <h1>This component render in "#example-domId"</h1>}
}
ReactDOMRender("example-domId", Example)

Example

basic example

TODO

  • add more examples
  • pass context to react page
  • test with server render
  • use the same component name for render in dom?
  • help to make layouts?

Readme

Keywords

Package Sidebar

Install

npm i react-render-pages

Repository

github.com/MiguelSavignano/react-render-pages

Homepage

github.com/MiguelSavignano/react-render-pages#readme

Weekly Downloads

0

Version

2.0.4

License

MIT

Unpacked Size

7.43 kB

Total Files

10

Last publish

Collaborators

  • miguemasx
Try on RunKit
Report malware