# useEmit

This hook return eventrix emit method

{% hint style="info" %}
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.
{% endhint %}

{% tabs %}
{% tab title="Javascript" %}

```jsx
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>
    );
}
```

{% endtab %}

{% tab title="Typescript" %}

```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>
    );
}
```

{% endtab %}
{% endtabs %}

You can also use emit with event factory method

{% tabs %}
{% tab title="Javascript" %}

```jsx
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>
    );
}
```

{% endtab %}

{% tab title="Typescript" %}

```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>
    );
}
```

{% endtab %}
{% endtabs %}