Evy React SDK

Evy SDK is a react / TS library that provides widgets for your Evy integration.

Installation

npm i @getevy/react-sdk

Usage

Evy root

This widget creates a context that will provide information to the Evy components.

import { EvyRoot } from '@getevy/ui-react';
// other imports here

const API_KEY = process.env.REACT_APP_API_KEY;

if (!API_KEY) throw new Error('Evy API key is not set. Please check your environment.');

const rootDOM = document.getElementById('root');
const root = ReactDOM.createRoot(rootDOM);

root.render(
<EvyRoot apiKey={API_KEY}>
  {/* The rest of the application here */}
</EvyRoot>
);

Props:

• apiKey: the API key to your store
• children: the rest of the component tree
• apiUrl: (optional) url to the evy API
• language: (optional) country code
• operator: (optional) object to customize the components with your brand. It has 2 keys
  • name: the name of the oeprator
  • logoUrl: a url to the logo of the operator

Components

** CartOffer **

import { CartOffer } from '@getevy/ui-react';

<CartOffer productId={productId} price={64000} />

Props:

• productId: id of the product
• price: current price of the product. When the price changes, this value has to change too.

** InlineOffer **

import { InlineOffer } from '@getevy/ui-react';

<InlineOffer productId={productId} price={64000}></InlineOffer>
```

Props:

- productId: id of the product
- price: current price of the product. When the price changes, this value has to change too.

** ModalOffer **

```Javascript
import { ModalOffer } from '@getevy/ui-react';
<ModalOffer
  productId={productId}
  price={64000}
  open={open}
  onClose={onCloseHandler}
></ModalOffer>

Props:

• productId: id of the product
• price: current price of the product. When the price changes, this value has to change too.

Hooks

** useEvyContext **

import { InlineOffer, ModalOffer, useEvyContext } from '@getevy/ui-react';

const { stately, evyState, operator } = useEvyContext();

Return values:

• stately: the state management library
• evyState: the current value of the state
• oeprator: the operator configurator set in the root