LogoLogo
  • Eventrix
  • Introduction
    • Installation
    • Quick start
    • Getting started
    • Demo
    • About
  • Devtools - EventrixDebugger
  • Use cases
    • Handle errors
    • Simple form management
    • Communication between components
    • Next.js
    • Basic setup on project
    • Fetch list and display in component
  • CONTEXT
    • EventrixProvider
    • PersistStoreGate
    • EventrixScope
  • MIGRATION
    • Redux -> Eventrix
  • Receivers
    • EventsReceiver
    • RequestsHandler
    • fetchToStateReceiver
    • fetchStateReceiver
    • fetchHandler
  • HOC
    • withEventrix
    • withEventrixState
  • HOOKS
    • useEventrixState
    • useEmit
    • useEvent
    • useEventState
    • useFetchToState
    • useReceiver
    • useFetchState
  • CLASS DECORATORS
    • @useEventrix
    • @receiver
    • @fetchToState
    • @listener
  • COMPONENT DECORATORS
    • @eventrixComponent
    • @eventListener
    • @stateListener
    • @eventrixState
Powered by GitBook
On this page

Was this helpful?

  1. HOOKS

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.

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

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

Last updated 3 years ago

Was this helpful?