React-html-component NPM

HTML to React Component 🍄

Usage

yarn add react-html-component

Example: Valid HTML Component

Rules:

You must only use IDs as styles tag.
Values in your HTML file starting with $ are going to be considered as props.

<div id="post-main">
    <head>
    <style>
          #post-text {
              margin-top: calc($size * 0.06);
              padding-right: calc($size * 0.07);
              padding-left: calc($size * 0.07);
              font-size: calc($size * 0.0475);
              color: #2A1C09;
              line-height: calc($size * 0.075);
              flex: 1;
              opacity: 0;
          }
      </style>
      </head>
          <p id="post-text">$text</p>
      <script>
      
        /* 
            This function is runned when the component render/re-render.
            It takes one parameter, an object with the props added in the file.
        */
        function componentDidUpdate(props){
          console.log(document.getElementById('post-text').width)
          console.log(props) //{ size: "400px", text: "This is a post text !" }
        }
    </script>
  </div>

So there are 2 props in this HTML file:

$size
$text

and one id:

post-text

In your React Component.

import React from 'react'
import HTMLComponent from 'react-html-component'
import HTMLTemplate from './template.html'

const main = () => (
  <div>
    <HTMLComponent 
      uniqKey={1} //Your component must always contain an `uniqKey` props.
      size={isMobile ? '200px' : '400px'} 
      text={"This is a post text !"}
    >{HTMLTemplate}</HTMLComponent>
  </div>
)

cheerio @babel/core @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/runtime lodash-es

@infinitebrahmanuniverse/nolb-react-ht @everything-registry/sub-chunk-2560

1.0.0

4 years ago