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