Comment on page
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>
);
}
Last modified 2yr ago