# useEvent

This hook listen on emit required event.

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

{% endtab %}

{% tab title="Typescript" %}

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

{% endtab %}
{% endtabs %}