# import-jsx

> Require and transpile JSX on the fly

Latest version **5.0.0** (published 2023-02-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install import-jsx
pnpm add import-jsx
yarn add import-jsx
bun add import-jsx
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2023-02-28 |
| First published | 2017-06-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Node | >=14.16 |
| Dependencies | 4 |
| Unpacked size | 7.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 177 |
| Author | Vadim Demedes |
| Maintainers | vdemedes |
| Keywords | react, jsx, require, require-jsx, import |

## Links

- npm: https://www.npmjs.com/package/import-jsx
- Repository: https://github.com/vadimdemedes/import-jsx
- Homepage: https://github.com/vadimdemedes/import-jsx#readme
- Issues: https://github.com/vadimdemedes/import-jsx/issues
- npm.io page: https://npm.io/package/import-jsx

## Dependencies (4)

- [make-dir](https://npm.io/package/make-dir.md) ^3.1.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.21.0
- [find-cache-dir](https://npm.io/package/find-cache-dir.md) ^4.0.0
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.18.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 5.0.0 (latest) — 2023-02-28
- 4.0.1 — 2022-01-05
- 4.0.0 — 2020-03-28
- 3.1.0 — 2020-01-12
- 3.0.0 — 2019-07-28
- 2.0.0 — 2019-03-16
- 1.3.2 — 2019-03-09
- 1.3.1 — 2019-03-09
- 1.3.0 — 2017-08-03
- 1.2.1 — 2017-07-20
- 1.2.0 — 2017-07-09
- 1.1.1 — 2017-06-25
- 1.1.0 — 2017-06-25
- 1.0.0 — 2017-06-24

## README

# import-jsx ![Build Status](https://github.com/vadimdemedes/import-jsx/workflows/test/badge.svg)

> Import and transpile JSX via [loader hooks](https://nodejs.org/dist/latest-v18.x/docs/api/esm.html#loaders). It doesn't transpile anything besides JSX and caches transpiled sources by default.

## Install

```console
npm install import-jsx
```

## Usage

> **Note**:
> `import-jsx` only works with ES modules.

```sh
node --loader=import-jsx react-example.js
```

**react-example.js**

```jsx
const HelloWorld = () => <h1>Hello world</h1>;
```

## Examples

### React

React is auto-detected by default and `react` will be auto-imported, if it's not already.

```jsx
const HelloWorld = () => <h1>Hello world</h1>;
```

### Preact

If an alternative library is used and exports `createElement`, like Preact, configure `import-jsx` to import it instead of React:

```jsx
/** @jsxImportSource preact */

const HelloWorld = () => <h1>Hello world</h1>;
```

### Any JSX pragma

For libraries not compatible with React's API, but which still support JSX, import it and configure `import-jsx` to use its pragma:

```jsx
/** @jsxRuntime classic */
/** @jsx h */
import h from 'vhtml';

const HelloWorld = () => <h1>Hello world</h1>;
```

### CLI

`import-jsx` can be used to transpile JSX inside CLI entrypoints defined in `bin` section of `package.json` and their imported files.

For example, given this **package.json**:

```json
{
	"name": "my-amazing-cli",
	"bin": "cli.js"
}
```

Insert this hashbang at the beginning of **cli.js**:

```jsx
#!/usr/bin/env NODE_NO_WARNINGS=1 node --loader=import-jsx

const HelloWorld = () => <h1>Hello world</h1>;
```

### Disable cache

`import-jsx` caches transpiled sources by default, so that the same file is transpiled only once.
If that's not a desired behavior, turn off caching by setting `IMPORT_JSX_CACHE=0` or `IMPORT_JSX_CACHE=false` environment variable.

```console
IMPORT_JSX_CACHE=0 node --loader=import-jsx my-code.js
```

---
_Source: https://npm.io/package/import-jsx · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._