> Build regular DOM elements using JSX With `dom-chef`, you can use Babel or TypeScript to transform [JSX](https://reactjs.org/docs/introducing-jsx.html) into plain old DOM elements, without using the unsafe `innerHTML` or clumsy `document.createElement` calls. It supports everything you expect from JSX, including: - [SVG elements](#render-svg) - [Event listeners](#inline-event-listeners) - [Inline CSS](#inline-styles) - [Nested elements](#nested-elements) - [Function elements](#use-functions) If something isn't supported (or doesn't work as well as it does in React) please open an issue! ## Install ``` $ npm install dom-chef ``` ## Usage Make sure to use a JSX transpiler (e.g. [Babel](#babel), [TypeScript compiler](#typescript-compiler), [esbuild](https://esbuild.github.io/content-types/#using-jsx-without-react), you only need one of them). ```jsx import {h} from 'dom-chef'; const handleClick = e => { // ); document.body.appendChild(el); ``` ### Babel `pragma` and `pragmaFrag` must be configured this way. More information on [Babel’s documentation](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx.html#pragma). ```js // babel.config.js const plugins = [ [ '@babel/plugin-transform-react-jsx', { pragma: 'h', pragmaFrag: 'DocumentFragment', }, ], ]; // ... ``` ### TypeScript compiler `jsxFactory` and `jsxFragmentFactory` must be configured this way. More information on [TypeScripts’s documentation](https://www.typescriptlang.org/tsconfig#jsxFactory). ```jsonc // tsconfig.json { "compilerOptions": { "jsxFactory": "h", "jsxFragmentFactory": "DocumentFragment" } } ``` ### Alternative usage You can avoid configuring your JSX compiler by just letting it default to `React` and exporting the `React` object: ```js import React from 'dom-chef'; ``` ## Recipes ### Set classes ```jsx const el = Text; // or use `className` alias const el = Text; ``` ### Inline styles ```jsx const el =
; ``` ### Inline event listeners ```jsx const handleClick = e => { // was clicked }; const el = Text; ``` This is equivalent to: `span.addEventListener('click', handleClick)` ### Nested elements ```jsx const title =

Hello World

; const body =

Post body

; const post = (
{title} {body}
); ``` ### Set innerHTML ```jsx const dangerousHTML = ''; const wannaCry =
; ``` ### Render SVG **Note**: Due to the way `dom-chef` works, tags ``, `