$ npm install nanocomponent-to-webcomponent
Adapters to make nanocomponent run natively inside frameworks. This allows you to write highly performant components once, and reuse them between all frameworks.
Not all languages and frameworks are supported yet; PRs to support more frameworks support are very welcome!
var toCustomElement = require('nanocomponent-adapters/custom-element')
var component = require('nanocomponent')
var html = require('bel')
// create new nanocomponent
var Button = component({
render: function (data) {
return html`
<button>hello planet</button>
`
}
})
// register as custom element
Button = toCustomElement(customButton, 'button')
document.registerElement('custom-button', Button)
// create new custom-button
var button = document.createElement('button', 'custom-button')
document.body.appendChild(button)
var toPreact = require('nanocomponent-adapters/preact')
var component = require('nanocomponent')
var preact = require('preact')
var html = require('bel')
var render = preact.render
// create new nanocomponent
var Button = component({
render: function (data) {
return html`
<button>hello planet</button>
`
}
})
Button = toPreact(Button)
// render an instance of Button into <body>:
render(<Button />, document.body);
var toReact = require('nanocomponent-adapters/react')
var reactDom = require('react-dom')
// create new nanocomponent
var Button = component({
render: function (data) {
return html`
<button>hello planet</button>
`
}
})
Button = toReact(Button)
ReactDOM.render(<Button />, mountNode)
var component = require('nanocomponent')
var html = require('choo/html')
var choo = require('choo')
// create new nanocomponent
var customButton = component({
render: function (data) {
return html`
<button>hello planet</button>
`
}
})
var app = choo()
choo.router(['/', mainView])
document.body.appendChild(choo.start())
mainView (state, prev, send) {
return html`
<section>
${customButton(state)}
</section>
`
}