Git Product home page Git Product logo

jsx-tmpl's Introduction

jsx-tmpl

Build JSX using native ES6 templates. No transpiling required for Node.js and modern browsers.

  • Returns strings for fast rendering on the server
  • Returns a full JSX virtual DOM on the client

Features

  • Valid ES6 syntax (no transpiling required for Node and modern browsers)
  • Caches JSX compilation for consecutive render() calls (so the HTML string is not converted to JSX on each render)
  • Converts HTML properties like "class" and "for" to required "className" and "htmlFor" for React
  • Use with any React-compatible framework (React, Preact, Inferno, etc.) or virtual DOM library

Installation

npm i jsx-tmpl --save

Usage

Just use the jsx tagged template literal and write normal HTML markup inside native ES6 templates.

const { jsx } = require('jsx-tmpl');
const Greeting = require('./Greeting');
const React = require('react');

class App extends React.PureComponent {
  render() {
    return jsx`
      <div class="App">
        <Greeting name="John Doe" />
      </div>
    `(React, { Greeting }); // Pass in React, and a hash of components used
  }
}

Passing Variables / Props

For dynamic props or rendering variables, use standard ES6 template interpolation:

const { jsx } = require('jsx-tmpl');
const Greeting = require('./Greeting');
const React = require('react');

class App extends React.PureComponent {
  render() {
    let name = "John Doe";

    return jsx`
      <div class="App">
        <Greeting name=${name} />
      </div>
    `(React, { Greeting }); // Pass in React, and a hash of components used
  }
}

Usage with Preact

Since React is passed in as a parameter to the resulting render function, you can substitute it for Preact, or any other virtual DOM library or React-compatible framework.

const { jsx } = require('jsx-tmpl');
const Preact = require('preact');

class App extends Preact.Component {
  render() {
    let name = "John Doe";

    return jsx`
      <div class="App">
        Hell World!
      </div>
    `(Preact); // Pass in Preact instead of React!
  }
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.