jsx-alone

jsx-no-react

jsx-alone makes it possible to use React's JSX syntax outside of React projects.

Forked from jsx-no-react in order to support a children parameter to the funtion element instead of appending chidlren to the element

Installation

npm i -S jsx-alone

You'll also need to hook the jsxElem function into the JSX transformation, for which you should probably use babel, which you can install and setup fairly simply:

npm i -D babel-plugin-transform-react-jsx babel-preset-env

and configure babel to correctly transform JSX with a .babelrc something like:

{
  "presets": ["env"],
  "plugins": [
    [
      "transform-react-jsx",
      {
        "pragma": "jsxElem"
      }
    ]
  ]
}

Usage

Basic

The jsx-alone package just defines a function to replace the React.createElement, so as well as importing the relevant function into scope where you want to use JSX:

import jsxElem, { render } from "jsx-alone";

function App(props) {
  return <div>Hello {props.name}</div>;
}

render(<App name="world" />, document.body);

or

import jsxElem, { render } from "jsx-alone";

function App(name) {
  return <div>Hello {name}</div>;
}

render(App("world"), document.body);

Components

Define

It's possible to define a component in different ways:

function Hello(props, children) {
  return <h1>Hello {props.name}</h1>;
}

// anonymous Function
const Hello = function(props, children) {
  return <h1>Hello {props.name}</h1>;
};

// arrow function
const Hello = (props, children) => <h1>Hello {props.name}</h1>;

// simple element
const hello = <h1>Hello</h1>;

Always start component names with a capital letter. babel-plugin-transform-react-jsx treats components starting with lowercase letters as DOM tags. For example <div /> is an HTML tag, but <Hello /> is a component and requires a user definition.

Please read JSX In Depth for more details and try babel example

Rendering

When rendering a component JSX attributes will be passed as single object.

For example:

import jsxElem, { render } from "jsx-alone";

function Hello(props, children) {
  return <h1>Hello {props.name}</h1>;
}

render(<Hello name="world" />, document.body);

Composing Components

Components can be reused and combined together.

import jsxElem, { render } from "jsx-alone";

function Hello(props, children) {
  return <h1>Hello {props.name}</h1>;
}

const CustomSeparator = (props, children) => (
  <i>{[...Array(props.dots)].map(idx => ".")}</i>
);

function App() {
  return (
    <div>
      <Hello name="foo" />
      <CustomSeparator dots={50} />
      <Hello name="bar" />
    </div>
  );
}

render(<App />, document.body);

Event

It's possible add events listeners to components as functions using camelCase notation (e.g. onClick)

For example:

function Hello(props, children) {
  return <h1>Hello {props.name}</h1>;
}

function App() {
  const clickHandler = function(e) {
    alert("click function");
  };

  return (
    <div>
      <Hello onClick={() => alert("inline click function")} name="foo" />
      <Hello onClick={clickHandler} name="bar" />
    </div>
  );
}

Embedding expressions in JSX

map()

function Hello(props, children) {
  const names = props.names;

  return (
    <div>
      {names.map(name => (
        <h1>Hello {name}</h1>
      ))}
    </div>
  );
}

function App() {
  return (
    <div>
      <Hello names={["foo", "bar"]} />
    </div>
  );
}

Inline If with Logical && Operator

function Hello(props, children) {
  return <h1>Hello {props.name}</h1>;
}

function App() {
  return (
    <div>
      {document.location.hostname === "localhost" && (
        <h1>Welcome to localhost</h1>
      )}
      <Hello name="foo" />
      <Hello name="bar" />
    </div>
  );
}

Calling a Function

function Hello(props, children) {
  return <h1>Hello {props.name}</h1>;
}

const CustomSeparator = props => (
  <i>{[...Array(props.dots)].map(idx => ".")}</i>
);

function App() {
  return (
    <div>
      <Hello name="foo" />
      <CustomSeparator dots={50} />
      <Hello name="bar" />
      {CustomSeparator({ dots: 10 })}
    </div>
  );
}

Style-Attribute

Object can be passed to the style attribute with keys in camelCase.

import jsxElem, { render } from "jsx-alone";

function Hello(props, children) {
  return <h1>Hello {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Hello style={{ backgroundColor: "red" }} name="foo" />
      <Hello style={{ backgroundColor: "blue", color: "white" }} name="bar" />
    </div>
  );
}

render(<App />, document.body);

Nesting

Children of the element are passed in the children parameter.

import jsxElem, { render } from "jsx-alone"

const AnElement = (props, children) => {
	return (
		<div>
			<h1>Hello</h1>
			<div>
				{children}
			</div>
		</div>
	)
}

const AnotherElement = (props, children) => {
	return <h2>A H2 heading with : <u>{children}</u></h2>
}

const e = render( (
	<AnElement>
		<AnotherElement>
			Hello again
		</AnotherElement>
	</AnElement>
), document.body)

Acknowledgement

This package was originally developed by Terry Kerr as jsx-no-react.