Guest Selector

The guest selector is an out of the box component offered by GoMeddo to it’s customers. The guest selector allows GoMeddo customers to easily specify the type of guests that can be selected with additional feature to set limit to total amount of guest can be selected, limit to specific guest type alongside setting a preset amount.

Props

The guest selector has five props:

Prop	Description
`presetGuestAmount`	Sets the guest indicator to the provided amount for the indicated guest
`maxGuest`	Sets a limit to the total amount of guests
`className`	Custom CSS class for controlling the selector
`limitToPreset`	Sets the minimum limit to the provided presetGuestAmount
`handleSelection`	Function that is called when a guest amount is increased

To set a preset guest amount, data matching the structure of the Returned Data example can be passed through the presetGuestAmount prop.

The guest has two props:

Prop	Description
`guestKey`	Identifier for the data return
`maxGuest`	Sets a limit to the specific guest amount

CSS Variables

The guest selector has five CSS variables:

Name	Description
`--guest-overview-border-color`	Changes the border color of the overview card
`--guest-overview-background-color`	Changes the background color of the overview card
`--plus-button-color`	Changes the color of the plus icon
`--minus-button-color`	Changes the color of the minus icon
`--chevron-animation-duration`	Changes the duration of the animation of the chevron on the overview

--plus-button-color and --minus-button-color CSS variable require the color to be in CSS filter format. An example found at the example use case part of this documentation.

Returned Data

Returned data is a object that will be constructed based on the key of the Guest component.

CODE

{
  [key: string]: number
}

Example

JSON

{
    "elderly": 0,
    "adults": 0,
    "children": 0
}

Example use case

GuestSelector can be used in two different way. First example shows first use case with Guest within the GuestSelector body. Second example shows the second use case without Guest within the GuestSelector body.

CSS

.your-custom-class {
  width: 45vw;
  display: flex;
  justify-content: center;
  align-items: center;

  --guest-overview-border-color: black;
  --guest-overview-background-color: white;
  --plus-button-color: brightness(0) saturate(100%) invert(33%) sepia(96%) saturate(3042%) hue-rotate(281deg) brightness(87%) contrast(107%);
  --minus-button-color: brightness(0) saturate(100%) invert(33%) sepia(96%) saturate(3042%) hue-rotate(281deg) brightness(87%) contrast(107%);
  --chevron-animation-duration: 200ms;
}

Example 1

JSX

import GuestSelector, {GuestObj} from "./components/GuestSelector.tsx";
import Guest from "./components/GuestSelectorComponents/Guest.tsx";
import '/path/to/your/css';

const handleSelection = (data: GuestObj) => {
    console.log(data);
}

<GuestSelector className={'your-custom-class'}
               handleSelection={handleSelection}
>
  <Guest key="elderly">
    Elderly
  </Guest>
  <Guest key="adults">
    Adult
  </Guest>
  <Guest key="children">
    Children
  </Guest>
</GuestSelector>

Example 2

The data that is returned will be in the following format

CODE

import GuestSelector, {GuestObj} from "./components/GuestSelector.tsx";
import Guest from "./components/GuestSelectorComponents/Guest.tsx";
import '/path/to/your/css';

const handleSelection = (data: GuestObj) => {
    console.log(data);
}

<GuestSelector className={'your-custom-class'}
               handleSelection={handleSelection}
/>