useEvent

This hook listen on emit required event.

If You want use hooks, hocs or component decorator You must use EventrixProvider in Your application. Go to "EventrixProvider" page in "Context" section for more details.

Javascript

import React, { useState, useCallback } from 'react';
import { useEvent, useEmit } from 'eventrix';

const UndoDeleteUserButton = () => {
    const [removedUser, setRemovedUser] = useState();
    const emit = useEmit();
    useEvent('removeUser', (eventData) => {
        const user = eventData;
        setRemovedUser(user);
    });
    const addUser = useCallback(() => {
        emit('addUser', removedUser);
        setRemovedUser(null);
    }, [emit, removedUser, setRemovedUser]);
    
    if (!removedUser) {
        return null;
    }
    return (
        <button onClick={addUser}>
            Undo user delete
        </button>
    );
}

Typescript

import { useEvent, useEmit } from 'eventrix';
import { User } from './interfaces';

const UndoDeleteUserButton = () => {
    const [removedUser, setRemovedUser] = useState<User | null>();
    const emit = useEmit<User>();
    useEvent('removeUser', (eventData: User) => {
        const user = eventData;
        setRemovedUser(user);
    });
    const addUser = useCallback(() => {
        if (removedUser) {
            emit('addUser', removedUser);
            setRemovedUser(null);
        }
    }, [emit, removedUser, setRemovedUser]);
    
    if (!removedUser) {
        return null;
    }
    return (
        <button onClick={addUser}>
            Undo user delete
        </button>
    );
}