react-opentable

React wrapper for Opentable Reservation Widget

Blog post, usage, demo and updates here: https://sahilsatishkumar.dev/blog/2020/08/21/react-opentable

Install

npm install --save react-opentable

Usage

import React, { Component } from 'react'
 
import OpenTable, { positions } from 'react-opentable'
import 'react-opentable/dist/index.css'
 
class Example extends Component {
  render() {
    return <OpenTable rid='123123' position={positions.POSITION_TOP_RIGHT} />
  }
}

Supported props:

Prop name	default value	Possible values
rid ✅		OpenTable Restaurant Id
type	'standard'	'button', 'standard'
theme	'standard'	'tall', 'wide', 'standard' (works only with type='standard')
iframe	true	Boolean
lang	'en-US'	'en-US', 'fr-CA', 'de-DE', 'es-MX', 'ja-JP', 'nl-NL', 'it-IT'
newtab	false	Boolean
ot_source		'Restaurant website', 'Email' 'Facebook', 'Google', 'Instagram', 'Other'
ot_campaign		String
customClassName		String
position	'bottom-left'	'top-left', 'top-right' ,'bottom-left', 'bottom-right', 'unset'

✅ - Required Prop

Detailed description of all props on OpenTable's widget creator tool.

customClassName - className attached to the container, can be used to override and add custom styles position - indicate which corner the widget has to be mounted to. Can be imported from package to avoid typos.

positions:

keyname	values
POSITION_TOP_LEFT	'top-left'
POSITION_TOP_RIGHT	'top-right'
POSITION_BOTTOM_LEFT	'bottom-left'
POSITION_BOTTOM_RIGHT	'bottom-right'
POSITION_UNSET	'unset'

Disclaimer

• This service IS NOT affiliated with OpenTable Inc., any of its products or employees.
• All content is represented as is and does not have any modifications to the original data

License

MIT © SahRckr