1.1.1 • Published 5 years ago

jsx-render v1.1.1

Weekly downloads
132
License
MIT
Repository
github
Last release
5 years ago

JSX-render

travis

Small file to render jsx as a stateless component from react but without the heavy kb use of it. and now includes server side rendering

Contents

Quick Start

  • Thanks to jsx-render starter you can just run one simple command and have webpack with stylus or sass ready to go.
$ mkdir sample && cd $_ && npx lz-cli gh alecsgone/lz-jsx-render

How To Install

The required packages are @babel/plugin-syntax-jsx, @babel/plugin-transform-react-jsx and of course jsx-render, additionally you will need @babel/core, webpack or any other way to transpile the code that you prefer.

$ npm install jsx-render @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx

Getting started

Make sure you have the pragma fn defined and its name is "dom"

// .babelrc
{
  "presets": ["@babel/preset-env", ["@babel/preset-react", { "pragma": "dom" }]]
}

Now you can create components e.g.

import dom from 'jsx-render'

const DummyComponent = props => <div>{props.children}</div>
export default DummyComponent

and render is possible both client and server side (check the recipe for SSR)

// client
import renderClient from 'jsx-render/renderClient'
import DummyComponent from './DummyComponent'

const element = renderClient(<DummyComponent />)
document.body.appendChild(element)

or Fragments

import dom, { Fragment } from 'jsx-render'
import DummyComponent from './DummyComponent'

const Modal = props => (
  <div>
    <header>Include {props.title}</header>
    <Fragment>
      <div>Body</div>
      <DummyComponent>Copyright</DummyComponent>
    </Fragment>
  </div>
)

Features

  • new Class suport with default target: the render() method
  • Render Basic Single Components <div />
  • Conditional Component {condition ? <foo/> : <bar/>}
  • Component with Data Attributes <div data-some="attr">
  • Component with Attributes <img src="foo.jpg">
  • Nested Component ul>li>a
  • Siblings Components ul>li*3
  • Components with classname p.chan
  • Map components & numbers array.map(item => <div>{item}</div>)
  • Fragments
  • Portals
  • SVG
  • Component Props <Custom foo="foo">
  • Component Children <Custom>children</Custom>
  • Component render xlinkHref for SVG sprites
  • dangerouslySetInnerHTML
  • Components withState Redux not included

Fragments

import dom, { Fragments } from 'jsx-render'

// Return siblings without direct parent component
const Foo = () => (
  <Fragments>
    <li />
    <li />
  </Fragments>
)
const ul = document.createElement('ul')
ul.appendChild(<Foo />)

Portals

import dom, { portalCreator } from 'jsx-render'

// can render the component on a diferent node than the parentNode
// useful for modals, and if the argument is not a node
// it will render as body direct son by default
function Component(node) {
  const Portal = portalCreator(node)

  return (
    <div>
      <Portal>
        <span>uno</span>
      </Portal>
    </div>
  )
}

dangerouslySetInnerHTML

function render() {
  return <div dangerouslySetInnerHTML={{ __html: '<span>StrangerDanger</span>' }} />
}

Recipes

1.3.1

5 years ago

1.2.0

5 years ago

1.1.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

2.0.0-alpha.1

5 years ago

2.0.0-alpha.0

5 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.0

6 years ago

0.6.6

6 years ago

0.6.5

6 years ago

0.6.3

6 years ago

0.6.2

6 years ago

0.6.1

6 years ago

0.6.0

6 years ago

0.5.0

6 years ago

0.4.0

6 years ago

0.3.0

6 years ago

0.2.0

6 years ago

0.1.4

6 years ago

0.1.2

6 years ago

0.1.0

6 years ago