Huge News!Announcing our $40M Series B led by Abstract Ventures.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.4.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
7.9K
increased by202.19%
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 instructions. 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

  1. class is supported as an attribute as well as className
  2. class can take an object with the format { [key: string]: boolean }. Keys with a truthy value will be added to the classList.
  3. 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

  1. style accepts both strings and objects.

Other Attributes

  1. dataset accepts an object.
  2. Attributes starts with on and has a function value will be treated as an event listener and thus attached to the node.
  3. innerHTML, innerText and textContent are accepted.

SVG and Namespacing

If you need to specify a namespace for your DOM element, pass a string attribute namespaceURI, except the following SVG elements which are supported out of the box:

svg, animate, circle, clipPath, defs, desc, ellipse, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, filter, foreignObject, g, image, line, linearGradient, marker, mask, metadata, path, pattern, polygon, polyline, radialGradient, rect, stop, switch, symbol, text, textPath, tspan, use, view

Goodies

Two extra functions and one constant are provided by this package:

  1. preventDefault(event: Event): Event
  2. stopPropagation(event: Event): Event
  3. SVGNamespace is the namespaceURI string for SVG Elements.

Browser Support

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

Keywords

FAQs

Package last updated on 16 May 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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc