react-jsx-template

installation

npm install react-jsx-template

peer dependencies

• Material-UI components version: ^"4.10.1" for reusable UI components. More information here

  to install run;

  npm install @material-ui/core

• React library. It comes by default if you scaffold your project on CRA. More information here

  to install run;

  npm install react

Usage

import {Template} from 'react-jsx-template'

// component showing how to structure your markup
render() {
    return (
        <Template>

            {/* the root element can be any element or component except <style> */}
            <root>

                {/* this is where the content of your component goes */}
                <p>Hello world!</p>

                <p>
                    Everything within the 'root' element will be regarded as the 
                    content of this component.
                </p>
            </root>

            <style>
            {`
                selector {property: value;}
            `}
            </style>
        </Template>
    )
}

• The root element, where we write our markup.
• A <style> element to contain our CSS rules.

// component with scoped styles, using material-ui component library
render() {
    return (
        <Template>
            <div> {/* this div is the root element */}

                {/* this is the content */}
                <p>Red colored content, try it</p>
            </div>

            <style>
            {`
                div {color: red;}
            `}
            </style>
        </Template>
    )
}

// template.js
import {StylesProvider} from 'location of user defined styles provider'
import {initializeTemplate} from 'react-jsx-template'

const Template = initializeTemplate(StylesProvider)
export default Template

// your component
import Template from './template.js'
import {Item} from 'other component library'

// component with scoped styles, using other component library
render() {
    return (
        <Template>
            <Item {/* this component is the root element */}
             display = 'flex'
             justifyContent = 'space-between'
             width = '100%'
             padding = '0.5rem'
             background = '#06397d'
            >
                <Item className='red box' height='100%'></Item>
                <Item className='yellow box' height='100%'></Item>
            </Item>

            <style> {/* user defined style rules override component library's inline styles */}
            {`
                .red {background: #911f1e;}

                .yellow {background: #fcdfa3;}

                .box {height: 50%;}
            `}
            </style>
        </Template>
    )
}

// styling the root element
render() {
    return (
        <Template>
            <div> {/* this is the root element */}
                The root element has red text.
            </div>

            <style>
            {`
                :host {color: red;}
            `}
            </style>
        </Template>
    )
}

// JS variable as CSS selector
render() {
    // we can change the value of 'target' dynamically to 'green' or 'blue'
    let target = 'red'

    return (
        <Template>
            <div>
                <p className={target}>
                    This paragraph has a variable className and a CSS selector that always matches its className and applies persistent styling rules, eliminating the need for an additional className.
                </p>
            </div>

            <style>
            {`
                p.${target} {...persistent styling rules}

                .red {color: red;}
                .green {color: green;}
                .blue {blue: blue;}
            `}
            </style>
        </Template>
    )
}

// JS variable as CSS property
render() {
   // we can dynamically alternate the value of 'property' between 'border-color' and 'color'
   let property = 'border-color'

   return (
       <Template>
           <div>
               <p className='someClass'> This paragraph can either have a blue text color or a blue border color</p> 
           </div>

           <style>
           {`
               .someClass {${property}: blue;}
           `}
           </style>
       </Template>
   )
}

// JS variable as CSS value
render() {
   // we can dynamically change 'value'
   let value = '10%'

   return (
       <Template>
           <div>
               <p className='someClass'> The CSS value of the height of this paragraph can be directly manipulated using Javascript.</p> 
           </div>

           <style>
           {`
               .someClass {height: ${value};}
           `}
           </style>
       </Template>
   )
}

// JS variable as CSS selector
render() {
    // we can dynamically change the value of 'size' to 'medium' or 'large'
    let size = 'small'

    return (
        <Template>
            <div>
                <p className={size}>The :before pseudo-element of this paragraph has persistent and variable
                style rules.</p>
            </div>

            <style>
            {`
                .${size}:before {
                    content: '';
                    position: absolute;
                    height: 10px;
                    background: crimson;
                }

                .small:before {width: 10%;}
                .medium:before {width: 25%;}
                .large:before {width: 40%;}
                .x-large:before {width: 60%;}
            `}
            </style>
        </Template>
    )
} 

// JS variable as media query breakpoint
render() {
    // we can dynamically adjust the breakpoint of the media query, thereby activating or deactivating it.
        let breakpointMobile = '720px'
        let breakpointDesktop = '1280px'

    return (
        <Template>
            <div>
                <p> You can alter the breakpoint to display desktop view on mobile and vice-versa. </p>
            </div>
            
            <style>
            {`
                @media screen and (max-width: ${breakpointMobile}) {
                    // mobile styling
                }

                @media screen and (min width: ${breakpointDesktop}) {
                    // desktop styling
                }
            `}
            </style>
        </Template>
    )
}