node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »

nanocomponent-adapters

nanocomponent-adapters stability

npm version build status downloads js-standard-style

Adapters to make nanocomponent run natively inside frameworks. This allows you to write highly performant components once, and reuse them between all frameworks.

Table of Contents

Not all languages and frameworks are supported yet; PRs to support more frameworks support are very welcome!

  • Preact
  • React
  • Choo
  • Angular
  • Ember
  • Cycle
  • Vue
  • Inferno
  • Custom Elements (webcomponents)
  • Elm

Preact

var toPreact = require('nanocomponent-adapters/preact')
var Nanocomponent = require('nanocomponent')
var preact = require('preact')
var html = require('bel')
 
var render = preact.render
 
class Button extends Nanocomponent {
  constructor () {
    super()
    this.color = null
  }
 
  handleClick () {
    console.log('choo choo!')
  }
 
  createElement ({color}) {
    this.color = color
    return html`
      <button onclick=${this.handleClick} style="background-color: ${color}">
        Click Me
      </button>
    `
  }
 
  update ({color}) {
    return newColor !== this.color
  }
}
 
var PreactButton = toPreact(Button, preact)
 
// render an instance of Button into <body>: 
render(<PreactButton color='red'/>, document.body);

React

var toReact = require('nanocomponent-adapters/react')
var Nanocomponent = require('nanocomponent')
var reactDom = require('react-dom')
var react = require('react')
 
class Button extends Nanocomponent {
  constructor () {
    super()
    this.color = null
  }
 
  handleClick () {
    console.log('choo choo!')
  }
 
  createElement ({color}) {
    this.color = color
    return html`
      <button onclick=${this.handleClick} style="background-color: ${color}">
        Click Me
      </button>
    `
  }
 
  update ({color}) {
    return newColor !== this.color
  }
}
 
var ReactButton = toReact(Button, react)
ReactDOM.render(<ReactButton color='white' />, mountNode)

Choo

Choo just works™.

var Nanocomponent = require('nanocomponent')
var html = require('choo/html')
var choo = require('choo')
 
// create new nanocomponent 
class Button extends Nanocomponent {
  constructor () {
    super()
    this.color = null
  }
 
  handleClick (color) {
    console.log('choo choo!')
  }
 
  createElement (color) {
    this.color = color
    return html`
      <button onclick=${this.handleClick} style="background-color: ${color}">
        Click Me
      </button>
    `
  }
 
  update (color) {
    return newColor !== this.color
  }
}
 
var app = choo()
app.route('/', mainView)
app.mount('body')
 
var customButton = new Button ()
 
function mainView (state, emit) {
  return html`
    <section>
      ${customButton.render('blue')}
    </section>
  `
}

See Also

License

MIT