(button, [\n {\n type: 'click',\n listener: function onClick() {},\n },\n {\n type: 'keydown',\n listener: function onKeyDown() {},\n },\n]);\n\n// ✨ types will automatically be inferred for you ✨\nbindAll(button, [\n {\n type: 'click',\n listener: function onClick() {},\n },\n {\n type: 'keydown',\n listener: function onKeyDown() {},\n },\n]);\n```\n\n> Typescript built in DOM types: [raw view](https://raw.githubusercontent.com/microsoft/TypeScript/master/lib/lib.dom.d.ts), [pretty view](https://github.com/microsoft/TypeScript/blob/master/lib/lib.dom.d.ts) (warning: pretty view seems to crash Github!)\n\n### Type helpers\n\n```ts\nimport { Binding, Listener, UnbindFn } from 'bind-event-listener';\n```\n\n`Listener`: the `function` or `object` that you provide to the `listener` property of a `Binding`\n\n```ts\nbind(button, {\n type: 'click',\n listener: function onClick() {}, // ← `Listener`\n});\n```\n\n`Binding`: the definition of an event binding.\n\n```ts\nbind(\n button,\n // ↓ `Binding`\n {\n type: 'click',\n listener: function onClick() {},\n },\n);\n```\n\n`UnbindFn`: a named type for `() => void` to make it clearer that the function will unbind the added event listener(s):\n\n```ts\nconst unbind: UnbindFn = bind(button, { type: 'click', listener: function onClick() {} });\n```\n\n## Recipe: [`react`](https://reactjs.org/) effect\n\nYou can return a [cleanup function](https://reactjs.org/docs/hooks-reference.html#cleaning-up-an-effect) from [`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect) (or [`useLayoutEffect`](https://reactjs.org/docs/hooks-reference.html#uselayouteffect)). `bind-event-listener` makes this super convenient because you can just return the unbind function from your effect.\n\n```ts\nimport React, { useState, useEffect } from 'react';\nimport { bind } from 'bind-event-listener';\n\nexport default function App() {\n const [clickCount, onClick] = useState(0);\n\n useEffect(() => {\n const unbind = bind(window, {\n type: 'click',\n listener: () => onClick((value) => value + 1),\n });\n\n return unbind;\n }, []);\n\n return Window clicks: {clickCount}
;\n}\n```\n\n> You can play with this [example on codesandbox](https://codesandbox.io/s/bind-event-listener-useeffect-mnfi3)\n\n## Cheers ????\n\nBrought to you by [@alexandereardon](https://twitter.com/alexandereardon)\n","_attachments":{},"homepage":"https://github.com/alexreardon/bind-event-listener#readme","bugs":{"url":"https://github.com/alexreardon/bind-event-listener/issues"},"license":"MIT"}