https://github.com/remcohaszing/mini-jsx

Create DOM elements using JSX
https://github.com/remcohaszing/mini-jsx

dom html jsx

Last synced: 6 days ago
JSON representation

Create DOM elements using JSX

• Host: GitHub
• URL: https://github.com/remcohaszing/mini-jsx
• Owner: remcohaszing
• License: mit
• Created: 2023-09-30T12:58:49.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-30T14:01:34.000Z (over 1 year ago)
• Last Synced: 2025-01-08T18:52:15.714Z (15 days ago)
• Topics: dom, html, jsx
• Language: TypeScript
• Homepage:
• Size: 410 KB
• Stars: 20
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Mini JSX

[![github actions](https://github.com/remcohaszing/mini-jsx/actions/workflows/ci.yaml/badge.svg)](https://github.com/remcohaszing/mini-jsx/actions/workflows/ci.yaml)

[![npm version](https://img.shields.io/npm/v/mini-jsx)](https://www.npmjs.com/package/mini-jsx)

[![npm downloads](https://img.shields.io/npm/dm/mini-jsx)](https://www.npmjs.com/package/mini-jsx)

[![codecov](https://codecov.io/gh/remcohaszing/mini-jsx/branch/main/graph/badge.svg)](https://codecov.io/gh/remcohaszing/mini-jsx)

Create DOM elements using JSX

## Table of Contents

- [Installation](#installation)

- [Usage](#usage)

  - [Attributes](#attributes)

  - [Ref](#ref)

  - [Children](#children)

- [Configuration](#configuration)

  - [TypeScript Configuration](#typescript-configuration)

  - [Babel Configuration](#babel-configuration)

  - [Using JSX Comments](#using-jsx-comments)

- [License](#license)

## Installation

```sh

npm install mini-jsx

```

## Usage

`mini-jsx` can be used to create native DOM nodes using JSX.

```jsx

const button = (

   {

      console.log('Click!')

    }}

    ref={(node) => {

      // Logs the button

      console.log(node)

    }}

    type="button"

  >

    

    Button text

  

)

```

### Attributes

All properties are assigned to the element as-is if the attribute exists on the element type.

Otherwise it is assigned as an attribute. This way attributes such as `role` and attributes are

supported, but also unknown attributes, such as `ng-app`. This also means for example `onclick`

should be used, not `click` or `onClick`.

### Ref

Also a `ref` prop can be defined as a function. This will be called with the created component after

its props and children have been set.

### Children

Children of type `null`, `undefined`, or `boolean` will be ignored. Arrays will be handled

recursively. Other elements will be appended to the DOM node as-is. This means HTML element children

will be rendered as expected, but other values will be converted to strings.

## Configuration

### TypeScript Configuration

This library is fully typed. In fact, it is written in TypeScript.

Add the following properties to `compilerOptions` in `tsconfig.json`.

```jsonc

{

  "compilerOptions": {

    // This should always be "react-jsx".

    "jsx": "react-jsx",

    "jsxImportSource": "mini-jsx",

    "lib": [

      "dom",

      // es2017 or higher is required

      "esnext"

    ]

    // More compiler options…

  }

}

```

### Babel Configuration

Add the following to your babel config.

```jsonc

{

  "plugins": [

    ["@babel/plugin-transform-react-jsx", { "runtime": "automatic", "importSource": "mini-jsx" }]

    // More plugins…

  ]

}

```

### Using JSX Comments

If you don’t want to configure Babel or TypeScript using the above methods project wide, a JSX

pragma can be used to transform a single file using `mini-jsx`. This way it can be combined with for

example React in the same project.

```js

/** @jsxRuntime automatic */

/** @jsxImportSource mini-jsx */

```

## License

[MIT](./LICENSE.md) © [Remco Haszing](https://github.com/remcohaszing)