Comments (7)
@joelnet Are child components possible? re there any examples with child components?
Yes. Child components are possible.
const Slider = ({ color, value, update }) =>
<div>
<input
type="range" min="0" max="255"
value={value}
oninput={e => update({
color: color,
value: e.target.value
})}
/>
</div>
app({
model: { red: 255, green: 255, blue: 255 },
view: (model, actions) =>
<div>
<p>Use sliders to change the background color.</p>
{Object.keys(model).map(color =>
<Slider
color={color}
value={model[color]}
update={actions.updateBgColor}
></Slider>)}
</div>
,
update: {
changeColor: (model, { color, value }) => ({ [color]: value })
},
effects: {
updateBgColor: (model, actions, data) => {
document.body.style.backgroundColor = `rgb(${model.red}, ${model.green}, ${model.blue})`
actions.changeColor(data)
}
}
})
from hyperapp.
The routing example utilizes an anchor
child, kind of. You can just use the code in that example with${anchor()}
etc..
from hyperapp.
It will be great if there is more advanced example - something like dynamic list of counters - it can show how to use child components, how to dynamically add elements and how to model updates.
from hyperapp.
Here is a dynamic list of counters.
const counter = (count, add, sub) => html`
<div>
<h1>${count}</h1>
<button onclick=${add}>+</button>
<button onclick=${sub} disabled=${count <= 0}>-</button>
</div>`
const counterReduce = (model, index, reduce) =>
model.map((item, i) => index === i ? reduce(item) : item)
app({
model: [],
update: {
create: model => model.concat(0),
remove: model => model.slice(0, -1),
add: (model, index) => counterReduce(model, index, count => count + 1),
sub: (model, index) => counterReduce(model, index, count => count - 1),
},
view: (model, msg) => html`
<div>
<button onclick=${msg.create}>Add Counter</button>
<button onclick=${msg.remove}>Remove Counter</button>
${model.map((item, i) => counter(item, _ => msg.add(i), _ => msg.sub(i)))}
</div>`
})
Also, check out the TodoMVC implementation.
from hyperapp.
For reference here is using multiple stateful components, whereas in the above counter
is a static function.
https://github.com/nichoth/hyperapp/tree/master/examples
var hyperapp = require('../')
var app = hyperapp.app
var html = hyperapp.html
function CounterList () {
return [Counter()]
}
CounterList.update = {
addCounter: model => model.concat([Counter()]),
removeCounter: (model, i) => {
var newState = [].concat(model)
newState.splice(i, 1)
return newState
},
counter: function (model, ev) {
var newState = [].concat(model)
var c = newState[ev.index]
newState[ev.index] = Counter.update[ev.type](c)
return newState
}
}
CounterList.view = function (model, msg) {
var counters = model.map(function (counter, i) {
var counterView = Counter.view(counter, {
add: () => msg.counter({ type: 'add', index: i }),
sub: () => msg.counter({ type: 'sub', index: i })
})
return html`
<div>
${counterView}
<button onclick=${msg.removeCounter.bind(null, i)}>
remove this counter
</button>
</div>
`
})
return html`
<div>
<button onclick=${msg.addCounter}>new counter</button>
${counters}
</div>
`
}
function Counter () {
return 0
}
Counter.update = {
add: model => model + 1,
sub: model => model - 1
}
Counter.view = function (model, msg) {
return html`
<div>
<button onclick=${msg.add}>+</button>
<h1>${model}</h1>
<button onclick=${msg.sub} disabled=${model <= 0}>-</button>
</div>`
}
app({
model: CounterList(),
update: CounterList.update,
view: CounterList.view
})
from hyperapp.
@joelnet No examples in the README yet, but this is now also possible when using jsx via: #77.
<MyComponents props=...>children</MyComponents>
from hyperapp.
Going to close this now that an example has been provided and this is prominent in Hyperapp features.
Stateless components: Build complex user interfaces from micro-components. Stateless components are framework agnostic, reusable, predictable and easier to debug.
from hyperapp.
Related Issues (20)
- A way to insert raw Html HOT 1
- TypeError: can't access property 0, newSubs is null, when setting the state to undefined. HOT 4
- Issue with null-vnodes HOT 1
- prevent rerender node HOT 2
- The dispatch initializer ends in an endless loop on init when dispatching any action HOT 7
- Injected classes gets removed when using object/array to define class props HOT 1
- hyperapp version HOT 3
- Memo Data Gotcha HOT 5
- Confusing doc for actions -> wrapped actions HOT 5
- Passing arguments to init HOT 4
- [Question] Headless mode is still possible? HOT 1
- Destroying a child app HOT 8
- @hyperapp/html: use a Proxy? HOT 9
- Actions returning other Actions HOT 5
- Compile template tag to hyperscript HOT 17
- A challenge to hyperapp community HOT 1
- Has 2.0 been dropped from development? HOT 3
- oldSub[2] is not a function HOT 3
- Cannot read properties of null (reading 'length') HOT 5
- Unlikely Use Case bug in HTML and SVG Packages HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hyperapp.