šŸš€ Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket

babel-plugin-jsxo

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-plugin-jsxo

JSX only files

0.0.3
latest
npm
Version published
Maintainers
1
Created
Source



Babel plugin that lets you create files with JSX only

Ā 

Babel plugin that lets you write files with JSX only and converts them into components at compile time.

Sometimes I need the power of components but miss the simplicity of writing HTML files. (especially for presentation components).

This is a let the bots do the work solution.

Ā 

You can create a file called about.js and put only the JSX you need, feels like HTML ā¤ļø

<div>Hi, My name is Sid</div>

This will be transpiled to:

import React from 'react'

function About(props) {
  return <div>Hi, my name is Sid</div>
}

export default About

That component name is picked up from the file name.

Ā 

Supports props:

<div>Hi my name is {props.name}</div>

Supports local variables:

const name = "Sid";

<div>Hi my name is {name}</div>

Supports imports:

import Input from './input';

<form>
  <label for="name">Name</label>
  <Input id="name"/>
</form>

Can be imported into other files

my-input.js

<input type="text" {...props} />

form.js

import Input from './my-input';

<form>
  <label for="name">Name</label>
  <Input id="name"/>
</form>

Ā 

Usage

Step 1. Install dependency

npm install babel-plugin-jsxo --dev

yarn add babel-plugin-jsxo --dev

Step 2. Drop it in your babel config as a plugin

{
  "presets": ["@babel/preset-react"],
  "plugins": ["jsxo"]
}

Ā 

Usage with create-react-app

It might be possible to write a babel macro for this, I'm not sure 🤷

Ā 

like it?

:star: this repo

Ā 

license

MIT Ā© siddharthkp

Keywords

jsxo

FAQs

Package last updated on 03 Apr 2019

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