npm ๐Ÿ“ฆ React OpenTable

I published my very first npm package: react-opentable (v2.0.0)

This post intends to be a helper document for the same, and will be kept upto date, if the package ever changes. As of writing this post, v2.0.0 is the latest and stable version of the package. The source code is in a private repository right now, will be open sourced soon!

react-opentable is a React wrapper for opentable's reservation widget.

info

DISCLAIMER: react-opentable is not affiliated to Opentable Inc., or it's employees.

Requirements

Works only with React v16.8 and above.

react-opentable uses hooks and will not work with previous versions (comment below if you need one)

Exports

There are two main exports from react-opentable

  • OpenTable React Component
  • positions JS Object

Usage

<OpenTable rid="123123" />
info

rid is a required prop, the component won't function correctly without it.

Default Props:

defaultPropsdescription
type='standard'Uses the standard widget type
theme='standard'Default standard theme
iframe=trueopens the widget in an iframe (recommended)
newtab=falsewidget won't open reservation in a new tab
position='bottom-left'widget opens in the 'bottom-left' position

Customization

The widget can be positioned in one of 5 positions namely 'top-left', 'top-right' ,'bottom-left' (default), 'bottom-right' and 'unset' (if you want to position the element through css, use this).

To avoid typos you can use the positions object with keys positions.POSITION_TOP_LEFT, positions.POSITION_TOP_RIGHT, positions.POSITION_BOTTOM_LEFT, positions.POSITION_BOTTOM_RIGHT and positions.POSITION_UNSET

For further customisations, pass customClassName, this className gets attached to the container of component.

Demo

Here's a code sandbox for you to tinker with:

Need feedback

Do let me know how can I make this components more useful for you ๐Ÿ˜