https://github.com/steelbrain/vanilla-jsx

Deprecated: A lightweight library that converts JSX into HTMLElements
https://github.com/steelbrain/vanilla-jsx

Last synced: 18 days ago
JSON representation

Deprecated: A lightweight library that converts JSX into HTMLElements

• Host: GitHub
• URL: https://github.com/steelbrain/vanilla-jsx
• Owner: steelbrain
• Created: 2015-11-18T14:05:50.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-03-18T05:51:04.000Z (over 7 years ago)
• Last Synced: 2024-10-20T12:35:50.009Z (24 days ago)
• Language: JavaScript
• Homepage:
• Size: 41 KB
• Stars: 4
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
Vanilla-JSX

=========

Vanilla-JSX is a library that converts JSX into vanilla HTML Elements.

#### Features

 - Converts JSX to vanilla HTMLElements

 - Translates className attribute into class

 - Supports event listeners as attributes like `
`

 - Supports `ref` attribute with `process` helper


#### API

```js

class Component {

  get element(): HTMLElement

  get refs(): Object

  render(...args): HTMLElement

  renderToString(...args): string

  dispose(): void

}

export function jsx(name, attributes, ...children)

export function createClass(object): Component

```

#### Example

```js

'use babel'

import {createClass as createJSXClass, jsx} from 'vanilla-jsx'

/** @jsx jsx */

// ^ the above comment is required for babel

const Message = createJSXClass({

  renderView: function(message) {

    this.logMessageCreation(message)

    return 


      {message.time}

      {message.from}

      {message.text}

    

  },

  changeText(text) {

    this.refs.text.textContent = text

  }

  logMessageCreation: function(message) {

    // do something with `message`

  }

})


const messageFromBob = new Message()

messageFromBob.render({

  time: Date.now() - (1000 * 60 * 60),

  from: 'Bob',

  text: 'Hey'

})

document.body.appendChild(messageFromBob.element)

messageFromBob.changeText("I'm the new text!")

const messageFromJohn = new Message()

messageFromJohn.render({

  time: Date.now() - (1000 * 60 * 60 * 2),

  from: 'John',

  text: 'Hey'

})

document.body.appendChild(messageFromJohn.element)

```

#### LICENSE

This project is licensed under the terms of MIT License, See the LICENSE file for more info