TLDR

Hospitality is not to change people, but to offer them space where change can take place. Henry Nouwen

Interactive demo.

Use

   # cd hospitality
   npm pack
   
   # cd demo
   npm link

The only dependency is <FocusScope/> from react-aria to improve focus management.

Get started

3 step process: define visual props, connect callbacks plus provide unavailable spots.

Play with examples for an interactive demo of all visual props. As for data in/out two options:

Callbacks props	Params
onSelect	Spots
onSelectByRows	Record<number, Spots>

<Hospitality> Provides a render prop to affect internal state from the outside and/or display alternative visuals to log current selection.

Available	Params
onSelect	Spot
selected	Spots

Styles

Powered by CSS grid, feel free to override default styles at your own risk using the following selectors:

[hospitality-root]{}

[hospitality-row]{}

[hospitality-row="map"]{}

[hospitality-spot]{}

[hospitality-spot="default"]{}

[hospitality-spot="default busy"]{}

[hospitality-spot="default selected"]{}

Recipes

How to display a 6 column 3 rows 'map' ?

  <Hospitality
        visual={{
          columns:6,
          rows:3,
        }}
      />

How to shape 6 columns in pairs ?

  <Hospitality
        visual={{
          columns:6,
          rows:3,
          shape:[2,2,2]
        }}
      />

How to chain components ?

  <Hospitality
        visual={{
          columns:6,
          rows:6,
        }}
   />

   <Hospitality
      visual={{
         columns:6,
         rows:6,
         // starts at row 7
         initialRowIndex:7
      }}
   />

How to draw a 'map' ?

import { MapProp } from "hospitality-react";

  // Let's build a wedding ceremony layout where  0 === invisible spot
const emptyGap: Array<0 | 1> = [0, 0, 0, 0];

const emptyRow: Array<0 | 1> = [
  ...emptyGap,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  ...emptyGap,
];

const mapWedding: MapProp = [
// two '1' for bride and groom
  [...emptyGap, 0, 0, 0, 1, 0, 1, 0, 0, 0, ...emptyGap],
  emptyRow,
  // '1's for guests, left for bride's right for groom's
  [...emptyGap, 1, 1, 1, 0, 0, 0, 1, 1, 1, ...emptyGap],
  [...emptyGap, 1, 1, 1, 0, 0, 0, 1, 1, 1, ...emptyGap],
  [...emptyGap, 1, 1, 1, 0, 0, 0, 1, 1, 1, ...emptyGap],
  emptyRow,
  [...emptyGap, 1, 1, 1, 0, 0, 0, 1, 1, 1, ...emptyGap],
  [...emptyGap, 1, 1, 1, 0, 0, 0, 1, 1, 1, ...emptyGap],
  [...emptyGap, 1, 1, 1, 0, 0, 0, 1, 1, 1, ...emptyGap],
];


  <Hospitality
        visual={{
          map
        }}
      />

How to log selection from the 'outside' ?

  <Hospitality
        visual={{
          columns:8,
          rows:8,
          shape:[2,4,2]
        }}
      >
     {({ selected }) => (
          <Fragment>
            {selected?.map(item => (
              <p key={`${item.row}-${item.spot}`}>
                {item.row}-{item.spot}
              </p>
            ))}
          </Fragment>
        )} 
   </Hospitality>
        

Roadmap

• provide alternative Spot designs
• publish useCamera demo

Feedback

Twitter

polmoneys.com