Hook

The root component creates a context that the Evy component in the tree can access. This context contains a reference to Evy Stately, and it holds the current state (so that the components can react to the state updates).

The hook is made to access the context easily.

usage

Parameters

no parameters needed

Returned value

The hook returns an object with the following keys:

Key	Type	Description
stately	`Stately`	The state management library instance
evyState	`EvyState`	The current state object
operator	`{name?: string, logoUrl?: string}`	The operator's data, as provided by the user

example

This example demonstrates the usage of the hook to access the state:

if there is no selected offer, it opens a modal to propose to add an offer
if there is a selected offer, it attaches the selected offer

import { ModalOffer, useEvyContext } from "@getevy/react-sdk";
import { useCallback, useState } from "react";

export const AddToCart = ({ addProductToCart, productId, price }) => {
  const { stately } = useEvyContext();
  const [open, setOpen] = useState(false);

  const handleButtonClick = useCallback(() => {
    const selectedOffer = stately?.getSelectedOffer(productId);

    if (stately && selectedOffer) {
      stately.attachSelectedOffer(productId, 1);
      addProductToCart();
    } else {
      setOpen(true);
    }
  }, [stately]);

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

  return (
    <>
      <button onClick={handleButtonClick}>Add to cart</button>
      <ModalOffer
        productId="saw"
        price={5000}
        open={open}
        onClose={onCloseHandler}
      />
    </>
  );
};