https://github.com/ziven27/jsx2string

Compile JSX to plain javascript strings, without React or other runtime libraries.
https://github.com/ziven27/jsx2string

jsx

Last synced: about 4 hours ago
JSON representation

Compile JSX to plain javascript strings, without React or other runtime libraries.

• Host: GitHub
• URL: https://github.com/ziven27/jsx2string
• Owner: ziven27
• Created: 2021-01-20T03:37:08.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-05-17T01:57:25.000Z (over 3 years ago)
• Last Synced: 2024-10-03T10:08:20.856Z (about 1 month ago)
• Topics: jsx
• Language: JavaScript
• Homepage: http://ziven27.github.io/jsx2string/
• Size: 43.9 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## jsx2string

Transpile JSX to plain javascript strings, without React or other runtime libraries.

| NPM package                          | github                          |

| ------------------------------------ | ------------------------------- |

| [![npm package][npm-badge]][npm-url] | [![github][git-badge]][git-url] |

[npm-badge]: https://img.shields.io/npm/v/jsx2string.svg

[npm-url]: https://www.npmjs.org/package/jsx2string

[git-url]: https://github.com/ziven27/jsx2string

[git-badge]: https://img.shields.io/github/stars/ziven27/jsx2string.svg?style=social

### Features

- Render Basic Single Component `
`

- ClassName to class `
`

- Ignore `false` props ``

- Conditional Component `{condition ?  : }`

- Component with Data Attributes `
`

- Component with Attributes ``

- Nested Component ul>li>a

- Siblings Components ul>li\*3

- Components with classname p.chan

- Map components & numbers `array.map(item => 
{item}
)`

- Fragment `<>hello world> hello world`

- Component Props ``

- Component Children `children`

- [dangerouslySetInnerHTML](#dangerouslysetinnerhtml)


### How To Install

1. The required packages are `@babel/plugin-syntax-jsx`, `@babel/plugin-transform-react-jsx` and of course `jsx2string`。

2. Need `@babel/core`, webpack or any other way to transpile the code that you prefer.

```sh

$ npm install jsx2string @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx

```

### Getting started

Make sure you have the "runtime" and "importSource" fn defined like below.

```json

// .babelrc

{

  "presets": [

    "@babel/preset-env"

  ],

  "plugins": [

    "@babel/plugin-syntax-jsx",

    [

      "@babel/plugin-transform-react-jsx",

      {

        "runtime": "automatic",

        "importSource": "jsx2string"

      }

    ]

  ]

}

```

Now you can create components e.g.

```jsx

import jsx2string, {Fragment} from "jsx2string";

const Avatar = ({children, title = "avatar", ...rest}) => {

  return {children};

};

const dangerText=`hello`;

const Home = function () {

  const user = {

    "firstName": "hello",

    "lastName": `world
`

  };

  return jsx2string(

    


      

      


      <>{null}>

      


      


      
{dangerText}

      
{() => 'hello'}

      
{['1', '2', '3']}

      

      

      

      
{[user.firstName, user.lastName].join(" ")} {dangerText} hello



      1232

      {[1, 2, 3].map((item) => {item})}

    

  )

};


export default Home;

```

> It just looks like React，but it's totally plain javascript. 

### dangerouslySetInnerHTML

```jsx

const dangerText=`hello`;

function render() {

  return 
this children will be ignore

}

```