Skip to content

Commit

Permalink
Merge pull request #18 from SahRckr/2020-08-21-react-opentable
Browse files Browse the repository at this point in the history
react-opentable blogpost
  • Loading branch information
SahRckr authored Aug 20, 2020
2 parents d9b7e2c + 9e387b9 commit 3d75cba
Show file tree
Hide file tree
Showing 4 changed files with 2,623 additions and 1,955 deletions.
73 changes: 73 additions & 0 deletions blog/2020-08-21-react-opentable.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
---
title: npm 📦 React OpenTable
description: React wrapper for Opentable Reservation Widget
author: Sahil Satishkumar
author_url: https://sahilsatishkumar.dev/contact
author_image_url: https://avatars1.githubusercontent.com/u/8242514
tags: [opentable, react-opentable, react-opentable wrapper]
---

I published my very first npm package: [`react-opentable (v2.0.0)`](https://www.npmjs.com/package/react-opentable)

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](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) 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

```jsx OpenTable Component
<OpenTable rid="123123" />
```

:::info

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

:::

Default Props:

| defaultProps | description |
| ---------------------- | -------------------------------------------- |
| type='standard' | Uses the standard widget type |
| theme='standard' | Default standard theme |
| iframe=true | opens the widget in an iframe (recommended) |
| newtab=false | widget 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:

<iframe src="https://codesandbox.io/embed/unruffled-snow-0zmiw?fontsize=14&hidenavigation=1&theme=light" style={{width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden'}} title="unruffled-snow-0zmiw" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" />
### Need feedback
Do let me know how can I make this components more useful for you :grin:
10 changes: 8 additions & 2 deletions docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,20 @@ module.exports = {
trackingID: "UA-141789564-1",
anonymizeIP: false,
},
disableDarkMode: true,
colorMode: {
disableSwitch: true,
},
prism: {
defaultLanguage: "javascript",
theme: require("prism-react-renderer/themes/github"),
},
navbar: {
title: "Hi, I'm Sahil",
logo: {
alt: "header-image",
src: "/img/favicon.svg",
},
links: [
items: [
{ to: "hire-me", label: "Hire me ❗️", position: "right" },
{ to: "blog", label: "Blog", position: "right" },
{ to: "books", label: "Books", position: "right" },
Expand Down
5 changes: 5 additions & 0 deletions src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,8 @@
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}

.admonition-icon {
margin: 0;
margin-right: 0.2rem;
}
Loading

0 comments on commit 3d75cba

Please sign in to comment.