Skip to content
Use React's JSX without React easily
JavaScript
Branch: master
Clone or download
Pull request Compare This branch is 21 commits ahead of oefd:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
dist
src
.babelrc
.editorconfig
.gitignore
LICENSE
README.md
package.json
yarn.lock

README.md

jsx-no-react

CircleCI

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

Installation

yarn add jsx-no-react

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:

yarn add 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-no-react 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-no-react";

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

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

or

import jsxElem, { render } from "jsx-no-react";

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) {
  return <h1>Hello {props.name}</h1>;
}

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

// arrow function
const Hello = props => <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-no-react";

function Hello(props) {
  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-no-react";

function Hello(props) {
  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" />
    </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) {
  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) {
  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) {
  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) {
  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-no-react";

function Hello(props) {
  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);

Acknowledgement

This package was originally developed by Terry Kerr.

You can’t perform that action at this time.