# Communication between components

You can communicate between component by events. First component [emit](https://eventrix.gitbook.io/eventrix/hooks/useemit) events and second component [listen for events](https://eventrix.gitbook.io/eventrix/hooks/useevent).

Full example of how communicate between components you can find [here](https://codesandbox.io/s/eventrix-communication-example-510rky?file=/src/App.js).

### Listen on events

Use [useEvent](https://eventrix.gitbook.io/eventrix/hooks/useevent) hook.

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

```jsx
import React, { useCallback } from "react";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";

import { useEvent } from "eventrix";

const ContactModal = () => {
  const [open, setOpen] = React.useState(false);

  const handleOpen = useCallback(() => {
    setOpen(true);
  }, [setOpen]);

  useEvent('Contacts:open.form', handleOpen);

  const handleClose = useCallback(() => {
    setOpen(false);
  }, [setOpen]);

  const handleSave = useCallback(() => {
    handleClose();
  }, [handleClose]);

  return (
    <div>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Contact</DialogTitle>
        <DialogContent dividers>
          Contact form
        </DialogContent>
        <DialogActions>
          <Button onClick={handleSave} variant="contained">
            Save
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};

export default ContactModal;
```

{% endtab %}
{% endtabs %}

### Emit event

Use [useEmit](https://eventrix.gitbook.io/eventrix/hooks/useemit) hook.

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

```jsx
import React from "react";
import { Button } from "@material-ui/core";

import { useEmit } from "eventrix";

const Navigation = () => {
  const emit = useEmit();
  return (
      <Button
        variant="contained"
        color="primary"
        onClick={() => {
          emit('Contacts:open.form');
        }}
      >
        Open contact form
      </Button>
  );
};

export default Navigation;
```

{% endtab %}
{% endtabs %}