raydiant-menu

Raydiant's React Menu component library for the Raydiant Menu apps.

How to use

1. Install raydiant-menu

yarn add raydiant-menu

IMPORTANT Make sure you are using react@16.8.0

2. Add Menu Properties

Your getProperties.js should look like this

import getMenuProperties from 'raydiant-menu/properties';

export default ({ presentation }) => {
  return {
    // your other props here
    ...getMenuProperties(presentation),
    duration: PropTypes.number('duration').min(5).default(120).helperText('time in seconds.'),
  };
};

Your App presentation will have more props

presentation: {
  values: {
    // other props
    ...
    // props from getMenuProperties
    shouldFormatPrice, // boolean
    currency, // string
    priceFormat, // string
    layout, // 'default' | 'flip'
    image, // { url: string }
    enableAnimation, // boolean
    footnote, // string
    footnoteSize, // 'small' | 'medium' | 'large'
    qrActive, // boolean
    qrSource, // 'needQRCode' | 'haveQRCode'
    qrUrlContent, // string
    qrImage, // { url: string }
    qrSize, // 'small' | 'medium' | 'large'
    qrCallToAction, // string
  },
  theme, // theme object from raydiant-kit PropTypes.theme
}

3. Render MenuLayout

// App.jsx
import MenuLayout from 'raydiant-menu';

const App ({
  presentation,
  isPlaying,
  isThumbnail,
  onReady,
  onError,
}) => {
  const categories = [...]; // App decides which content to be shown
  const config = {
    pricingUpdatingInterval: 1000, // optional, if provided, refresh prices every [pricingUpdatingInterval] miliseconds
  };

  return (
    <MenuLayout
      categories={categories}
      presentation={presentation}
      isPlaying={isPlaying}
      isThumbnail={isThumbnail}
      onReady={onReady}
      onError={onError}
      config={}
    />
  );
}