open-index/open-npm huggingface dataset:
npm package: @getevy/react-sdk
Description: Evy UI components – React flavour
Latest version: 0.0.32

# Evy React SDK

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

## Installation

```sh
npm i @getevy/react-sdk
```

## Usage

### Evy root

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

```Javascript
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 **

```Javascript
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 **

````Javascript
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 **

```Javascript
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