New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

jsx-dom

Package Overview
Dependencies
Maintainers
1
Versions
90
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jsx-dom

JSX to document.createElement.

4.2.0
Source
npm
Version published
Weekly downloads
5.6K
-26.1%
Maintainers
1
Weekly downloads
 
Created
Source

jsx-dom

Use JSX for creating DOM elements.

Installation

npm install --save jsx-dom

Usage

import { createElement } from 'jsx-dom';
document.body.appendChild( <div id="greeting" class="alert">Hello World</div> );

You need to tell your transpiler to use the name createElement. If you prefer not to, skip to the next section for instrutions. For Babel users, specify within your .babelrc:

{
  "plugins": [
    [ "transform-react-jsx", { "pragma": "createElement" } ]
  ]
}

Or if you prefer to work with TypeScript:

// In tsconfig.json:
{
  "jsx": "react",
  "jsxFactory": "createElement",
}

Usage without .babelrc or tsconfig options

If you don’t want to configure your transpiler to use jsx-dom, simply import it using the React namespace:

import * as React from 'jsx-dom';

Syntax

jsx-dom is based on the React JSX syntax with a few additions:

  • class is supported as an attribute as well as className
  • class can take an object with the format { [key: string]: boolean }. Keys with a truthy value will be added to the classList.
  • class can also take an array of values: Note that false, true, null, undefined will be ignored per React documentations, and everything else will be used. As an example: <div class={[ condition && "class" ]} />;
  • style accepts both strings and objects.
  • dataset accepts an object.
  • Attributes starts with on and has a function value will be treated as an event listener and thus attached to the node.
  • innerHTML, innerText and textContent are accepted.

Goodies

Two extra functions are provided by this package:

  • preventDefault(event: Event): Event
  • stopPropagation(event: Event): Event

Browser Support

jsx-dom requires Object.keys support. This means IE9 or later.

Keywords

jsx

FAQs

Package last updated on 18 Apr 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts