https://github.com/streamich/jsx-plus-plus

Better JSX for busy developers
https://github.com/streamich/jsx-plus-plus

Last synced: about 1 year ago
JSON representation

Better JSX for busy developers

• Host: GitHub
• URL: https://github.com/streamich/jsx-plus-plus
• Owner: streamich
• Created: 2018-03-28T17:15:39.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2025-04-02T20:42:45.000Z (about 1 year ago)
• Last Synced: 2025-04-02T21:34:29.819Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 137 KB
• Stars: 46
• Watchers: 1
• Forks: 1
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# JSX++

Missing features for your React JSX templates.

- Inline style prefixing

- Better class name syntax

- Dynamic CSS — [*demo!*](https://codesandbox.io/s/ryoy53q4mn)

- Set DOM element props — [*demo!*](https://codesandbox.io/s/535k08vwm4)

- Set DOM element attributes

- Add native DOM event listeners — [*demo!*](https://codesandbox.io/s/2wlvo21yp0)

- Micro life-cycles

Usage:

```js

require('jsx-plus-plus');

```

Done!

## Inline Style Prefixing

Auto-prefixes inline styles, uses only required prefixes by your browser.

```jsx



```


Result:

```html



```


## Better Class Names

Set class names using either `class` or `className` props. Use [`classnames`](https://www.npmjs.com/package/classnames)

syntax.

```jsx





```


Result:

```html





```


## Dynamic CSS

JSX++ will dynamically generate scoped CSS for your nodes.

```jsx

Hover me!

```


Result:

```css

[data-css-123] {

    color: red;

}

[data-css-123]:hover {

    color: blue;

}

```

```html

Hover me!

```


## DOM Element Props

Sets props on native DOM elements.

```jsx



```


Result:

```html

foobar

```


## DOM Element Attributes

Sets attributes of DOM elements.

```jsx



```


Result:

```html



```


## Native DOM Events

Add listeners to native DOM events.

```jsx

 console.log('CLICKED')}}>Click me!

```

## Micro Life-cycles

Add micro life-cycles to React DOM string elements.

```jsx

 console.log('element attached: ', el, props)}

  $update={(el, props, oldProps) => console.log('element updated: ', el, props, oldProps)}

  $detach={(el, oldProps) => console.log('element detached: ', el, oldProps)}

/>

```