Search…
⌃K

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