@deveire/dynamic-react-components v0.1.8

Dynamic React Components

This library allows you to render isolated React components on the front end. It is especially useful in cases where you need to ingest back-end data/endpoints but don't have access to the back-end renderer.

npm i @deveire/dynamic-react-components

How to use this library

This library does not contain React, or React DOM - these must be included in the projects you are running this library with. The reason is that the components will need to be created in the external project, so you will need React to do that there.

In Your Markup

This is a basic example of a component that is being passed some simple JSON.

<dynamic-react-component
	data-component="ReactModuleA"
	data-json="{ \"title\": \"This is the title\", \"description\": \"This is the description\" }">
<dynamic-react-component>

Note: You can pass any number of data- attributes that will get picked up and passed through automatically to your React component props.

Any inner HTML (if any) will be passed under props._innerHTML.

In Your JavaScript

Using the dynamicReactComponents(options) is as simple as:

import React from 'react'
import { createRoot } from 'react-dom/client'
import { dynamicReactComponents } from '@deveire/dynamic-react-components'

import ReactModuleA from './components/ReactModuleA'
import ReactModuleB from './components/ReactModuleB'

dynamicReactComponents({
  components: {
    ReactModuleA,
    ReactModuleB
  },
  React,
  createRoot,
  selector: 'dynamic-react-component'
})

Example ReactModuleA Code

import React from 'react'

export default class ReactModuleA extends React.Component {
  render () {
    const data = JSON.parse(this.props.json)

    return (
      <div className='ReactModuleA'>
        <p>This is a React Module A example</p>
        <p>Here is the JSON: </p>

        <code>
          { this.props.json }
        </code>

        <hr/>

        { data.title &&
          <div className="ReactModuleA-title">{ data.title }</div>
        }
        { data.description &&
          <div className="ReactModuleA-description">{ data.description }</div>
        }
      </div>
    )
  }
}

Options

The following options are available when calling dynamicReactComponents(options):

To build and test locally

Clone the repo and cd to it followed by running npm install.

Then run the build command: npm run build

Next is to go to the project you are using the library in and install the locally built version of this library:

npm install path\to\the\local\repo