Skip to content

Instantly share code, notes, and snippets.

@kof
Last active August 30, 2017 15:49
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
Copy link
Author

kof commented Aug 30, 2017

Todo:

  • figure out a way to move lifecycle

Uh oh!

There was an error while loading. Please reload this page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment