Awesome
preact-delegate
Delegate DOM events with Preact (since Preact doesn't do that by default).
Install
npm install preact-delegate --save-dev
Usage
Just wrap your root element from where to capture events with DelegateContainer and then wrap individual elements which should receive events with DelegateElement. See example:
import { Component } from 'preact';
import { DelegateContainer, DelegateElement } from 'preact-delegate';
class MyComponent extends Component {
constructor(...args) {
super(...args);
this.onClick = (e) => {
console.log(e.target);
};
}
render({ items }) {
return <DelegateContainer>
<div class="my-component">
{items.map(item => (
<div class="my-item">
<DelegateElement click={this.onClick}>
<button type="button" class="my-button">{ item.text }</button>
</DelegateElement>
</div>
))}
</div>
</DelegateContainer>
}
}