npm package: @liquidcloud/modules-react
Description: Liquid UI React Components
Latest version: 0.1.1

![](https://storage.googleapis.com/liquid-platform/repo_lc_dark.webp)

# Liquid Modules

## Getting Started

The Liquid Modules is comprised of modular components encapsulated by our LiquidCommerce SDK.

Components are pre-built, easily styled to assist users in the creation and implementation of a shopping journey from product discovery to order placement without the need to implement functionality against the user interactions.

The Modules were designed to handle the most critical touch-points of the optimized shopping journey specifically for beverage alcohol eCommerce. By simplifying these interactions while also providing customization options, these solutions can cover a variety of use cases and are essentially ready out of the box.

The SDK was built using **Web Components** but also provided as **React** components. You can install the package through NPM.

```bash
# for Web Components
npm install @liquidcloud/modules-react
# or
yarn add @liquidcloud/modules-react

# for React
npm install @liquidcloud/modules-react
# or
yarn add @liquidcloud/modules-react
```

To further customize the UI components, users can access and edit our theme providers to ensure the component looks, feels, and functions like it is native.

## Authentication

The Liquid Modules methods use API keys to authenticate requests. You can request your keys from your Partnerships liaison.

Development mode secret keys have the prefix `dev_` and Production ready secret keys have the prefix `prod_`.

Your API keys carry many privileges, so be sure to keep them secure! Do not share your secret API keys in publicly accessible areas such as GitHub, client-side code, and so forth.

Once you create a new instance of the `LiquidModules()` library it will generate an access token that then automatically attaches to each request, the access token has a 1 hour expiry that continues to refresh on each call. If an hour has passed without using the token, you must authenticate again to fetch a fresh access token.

```typescript
import LiquidModules from '@liquidcloud/modules-react';

LiquidModules('dev_******************', {
  // You'll need to provide your own Google Maps API Key
  googlePlacesApiKey: 'AIzaSyD_******************-********',
}).then((liquidModules) => {
  const { setDeliveryAddress } = liquidModules;
  // Setting your address
  setDeliveryAddress({
    address: {
      one: '100 madison ave',
      two: 'apt 1707',
      city: 'New york',
      state: 'NY',
      zip: '10016',
    },
  });
});
```

## Product

The product module is a fully encapsulated product details component, with real-time availability and all necessary functionality for user interactions.

```tsx
import type { FC } from 'react';
import { useEffect } from 'react';
import LiquidModules, { LiquidProductInfo } from '@liquidcloud/modules-react';

const styles: Record<string, any> = {
  colors: { primary: '#1F5EA9', bg: { primary: '#FFFFFF', secondary: '#F4F9FD' } }, // remove
  fonts: { color: '#1E293B', family: 'Poppins' }, // remove
  rounded: true, // remove
  text: {
    headings: {
      font: 'Montserrat',
      color: '#1E293B',
    },
    body: {
      font: 'Montserrat',
      color: '#1E293B',
    },
    hyperlink: {
      font: 'Montserrat',
      color: '#A58154F1',
    },
  },
  components: {
    qtyElement: {
      type: '-/+',
      active: true,
      text: '#0f172a',
      bg: '#\tD1D5DB',
      border: '#0F172A',
      btnText: '#0f172a',
      btnBg: '#D1D5DB',
      btnBorder: '#0F172A',
    },
    cartItem: {
      imgBorder: {
        active: true,
        border: '#A58154F1',
      },
      bg: '#333333',
      border: '#A58154F1',
    },
    overlay: {
      btnSave: {
        text: '#FFFFFF',
        bg: '#A58154F1',
        border: '#A58154F1',
      },
      btnCancel: {
        text: '#A58154F1',
        bg: '#FFFFFF',
        border: '#A58154F1',
      },
    },
    alerts: {
      text: '#60A5FA',
      bg: '#F0F9FF',
      border: '#F0F9FF',
    },
  },
  general: {
    header: {
      text: '#F0F9FF',
      bg: '#0F172A',
      border: '#A58154F1',
      btnText: '#F0F9FF',
      btnBg: '#EF444400',
      btnBorder: '#A58154F1',
    },
    footer: {
      text: '#F0F9FF',
      bg: '#0F172A',
      border: '#A58154F1',
      btnText: '#F0F9FF',
      btnBg: '#EF444400',
      btnBorder: '#A58154F1',
    },
    element: {
      corners: 'sharp',
      bg: '#333333',
      border: '#A58154F1',
      liquidLegal: true,
    },
    engraving: {
      active: true,
    },
  },
};

const LiquidProductPage: FC = () => {
  useEffect(() => {
    // Your Account token provided to you through your account representative
    LiquidModules('dev_******************', {
      // You'll need to provide your own Google Maps API Key
      googlePlacesApiKey: 'AIzaSyD_******************-********',
    }).then((liquidModules) => {
      const { setDeliveryAddress } = liquidModules;
      // Setting your address
      setDeliveryAddress({
        address: {
          one: '100 madison ave',
          two: 'apt 1707',
          city: 'New york',
          state: 'NY',
          zip: '10016',
        },
      });
    });
  }, []);

  return (
    <div style={{ maxWidth: '500px' }}>
      <LiquidProductInfo upc="00619947000020" styles={styles} />
    </div>
  );
};

export default LiquidProductPage;
```