Communication between components

You can communicate between component by events. First component emit events and second component listen for events.

Full example of how communicate between components you can find here.

Listen on events

Use useEvent hook.

Javascript

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;

Emit event

Use useEmit hook.

Javascript

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;