useEmit

This hook return eventrix emit method

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, { useCallback } from 'react';
import { useEmit } from 'eventrix';

const RemoveUserButton = ({ user }) => {
    const emit = useEmit();
    const removeUser = useCallback(() => {
        emit('removeUser', user)
    }, [emit, user]);
    return (
        <button onClick={removeUser}>
            Remove user
        </button>
    );
}

Typescript

import React, { useCallback } from 'react';
import { useEmit } from 'eventrix';
import { User } from './interfaces';

interface PropsI {
    user: User;
}

const RemoveUserButton = ({ user }: PropsI) => {
    const emit = useEmit<User>();
    const removeUser = useCallback(() => {
        emit('removeUser', user)
    }, [emit, user]);
    return (
        <button onClick={removeUser}>
            Remove user
        </button>
    );
}

You can also use emit with event factory method

Javascript

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

const removeUserEvent = (eventData) => {
    const removeUserEventName = 'removeUser';
    return [removeUserEventName, eventData];
}

const RemoveUserButton = ({ user }) => {
    const emit = useEmit();
    const removeUser = useCallback(() => {
        emit(removeUserEvent(user));
    }, [emit, user]);
    return (
        <button onClick={removeUser}>
            Remove user
        </button>
    );
}

Typescript

import React, { useCallback } from 'react';
import { useEmit } from 'eventrix';
import { User } from './interfaces';

interface PropsI {
    user: User;
}

const removeUserEvent = (eventData: User): [string, User] => {
    const removeUserEventName = 'removeUser';
    return [removeUserEventName, eventData];
}

const RemoveUserButton = ({ user }: PropsI) => {
    const emit = useEmit<User>();
    const removeUser = useCallback(() => {
        emit(removeUserEvent(user));
    }, [emit, user]);
    return (
        <button onClick={removeUser}>
            Remove user
        </button>
    );
}