Instantly share code, notes, and snippets.

Embed
What would you like to do?
Reactive Component
class MyComponent extends Component {
componentWillMount() {
alert('will mount')
}
onClick = () => {
alert('Button Clicked')
// Forward click to the outer listeners.
this.props.onClick()
}
render() {
return (
<div>
<Button
disabled={this.props.disabled}
onClick={this.onClick}
>
{this.props.text}
</Button>
</div>
)
}
}
// Using https://github.com/tc39/proposal-observable
const render = ({lifecycle, disabled, text}) => {
let myButton
const container = div({
children: [myButton = button({disabled, children: text, lifecycle})]
})
return {container, myButton}
}
const MyComponent = (props) => {
const {container, myButton} = render(props)
const events = new Observable((observer) => {
myButton.events.subscribe({next: (event) => {
alert('Button event', event)
// Forward click to outer listeners.
observer.next(event)
}})
})
props.lifecycle.subscribe({next: (state) => {
alert('lifecycle', state) // for e.g. willMount
}})
return {renderable: container.renderable, events}
}
@kof

This comment has been minimized.

Owner

kof commented Aug 30, 2017

Todo:

  • figure out a way to move lifecycle
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment