Nifty Procrastination Machine

    use-emitter
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.21 • Public • Published

    use-emitter

    React helper for event emitters and socket.io

    Installation

    npm install use-emitter
    yarn add use-emitter

    Usage

    EmitterProvider

    // App.jsx
    import React from 'react';
     
    import { EmitterProvider } from 'use-emitter';
     
    // import some kind of event emitter
    import EventEmitter from 'events';
    const myEmitter = new EventEmitter();
     
    // you can also use socket.io as event emitter
    import io from 'socket.io-client';
    const myEmitter = io('http://some-socket-server.com');
     
     
    export default function () {
       return (
          <EmitterProvider emitter={myEmitter}>{...children}</EmitterProvider>
       );
    };

    useEvent

    Use data and the emit function for the specific event.

    import React from 'react';
     
    import { useEvent } from 'use-emitter';
     
    export default function SomeComponent () {
       const [ message, emitMessage ] = useEvent('new-message');
       const firstMessage = useEvent.once('new-message');
     
       return (
             <div>
                <p>Current message: {message}</p>
                <p>First message: {firstMessage}</p>
             </div>
     
             <input
                type="text"
                value={message}
                onChange={e => emitMessage(e.target.value)}
             />
          </div>
       );
    };

    You can also provide the default value of the event as the second parameter of the useEvent function.

    const message = useEvent('new-message', 'Message has not been set yet');
    const firstMessage = useEvent.once('new-message', 'Message has not been set yet');

    useEmit

    Use only emit function for the specific event.

    import React, { useState } from 'react';
     
    import { useEmit } from 'use-emitter';
     
    export default function SomeComponent () {
       const [ messageText, setMessageText ] = useState('');
       const emitMessage = useEmit('message');
     
       return (
          <div>
             <input
                type="text"
                value={messageText}
                onChange={e => updateMessageText(e.target.value)}
             />
     
             <button onClick={() => emitMessage(messageText)}>
                Set message
             </button>
          </div>
       );
    }

    useEmitter

    Use the full instance of the emitter with all of its methods.

    import { useEmitter } from 'use-emitter';
     
    export default function SomeComponent () {
       const emitter = useEmitter();
    }

    Additional properties

    Additional properties for the on method.
    If the event emitter of your choice expects additional options, you can provide them after the default value.

    import { useEvent } from 'use-emitter';
     
    export default function SomeComponent () {
       const [data, emitData] = useEvent('event-name', null, arg1, arg2, arg3);
    }
     
    // Event emitter will receive the next arguments:
    // emitter.on('event-name', callback(), arg1, arg2, arg3)

    Additional properties for the emit method.
    If the event emitter of your choice expects additional options or multiple data values, you can provide them as the arguments of the emit function.

    import { useEvent } from 'use-emitter';
     
    export default function SomeComponent () {
       const [data, emitData] = useEvent('event-name');
     
       function handleClick () {
          emitData(data, arg1, arg2, arg3)
       }
    }
     
    // Event emitter will receive the next arguments:
    // emitter.emit('event-name', data, arg1, arg2, arg3)

    Install

    npm i use-emitter

    DownloadsWeekly Downloads

    24

    Version

    0.0.21

    License

    MIT

    Unpacked Size

    65.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • dejansandic