react-opentable
Version:
React wrapper for Opentable Reservation Widget
72 lines (51 loc) • 3.12 kB
Markdown
# react-opentable
> React wrapper for Opentable Reservation Widget
[](https://www.npmjs.com/package/react-opentable) [](https://standardjs.com)
Blog post, usage, demo and updates here: [https://sahilsatishkumar.dev/blog/2020/08/21/react-opentable](https://sahilsatishkumar.dev/blog/2020/08/21/react-opentable)
## Install
```bash
npm install --save react-opentable
```
## Usage
```jsx
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](https://www.opentable.com/widget/reservation/preview).
`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](https://github.com/SahRckr)