use-event-listeners

React node event hook

Install

npm install --save use-event-listeners

See Nodejs Event

Usage

useEventListener

import React, { useState } from 'react'

import useEventListener from 'use-event-listeners'

export default () => {
  const [text, setText] = useState('')

  const emmitter = useEventListener(
    {
      listeners: {
        setText: (text) => {
          setText(text)
        }
      },
      removeListeners: {
        setText: () => console.log('setText removed')
      }
    },
    []
  )

  return (
    <div>
      <div>
        Using useEventListener{' '}
        <span aria-label='smile' role='img'>
          😄
        </span>
        <div>Text input: {text}</div>
        <input
          value={text}
          onChange={({ target: { value } }) => emmitter.emit('setText', value)}
        />
      </div>
    </div>
  )
}

useEmitter

import React, { useState } from 'react'
import { useEmitter} from 'use-event-listeners'

const UseEmitter = () => {
  const emitter = useEmitter()

  return (
    <button onClick={() => emitter.emit('setText', '')}>Reset input</button>
  )
}

Apis

useEventListener

useEventListener({
  listeners: {'eventName': (...payloads, params) => any},

  removeListeners: {'eventName': () => any},

  params: {}
}, []: dependency): emitter

useEmitter

useEmitter(): emitter

emit

emitter.emit('eventName', ...payloads)

License

MIT © myckhel