bukazu-portal-react

A React component library that embeds the Bukazu booking portal — calendar, search, and reviews modules — directly into any React application.

---

What is Bukazu?

Bukazu is an online booking and property-management platform for holiday rentals. It provides a fully-managed back-end (availability calendars, pricing, booking forms, guest reviews) and exposes that data through a REST API. This library is the official front-end component that lets you surface Bukazu data on your own website without building the UI from scratch.

Modules included

Module	Description
Calendar	Interactive availability calendar with arrival/departure highlighting, pricing, discount indicators, and an embedded booking form
Search	Filterable property search with grid/list view, pagination, and customisable filter fields
Reviews	Display guest reviews and aggregate score for a specific property

---

Installation

npm install bukazu-portal-react

Then import the bundled stylesheet once in your application entry point:

import 'bukazu-portal-react/index.css';

---

Quick Start

The default export is the Portal component. Pass your portal code (and optionally an object code) to load the correct module.

import Portal from 'bukazu-portal-react';
import 'bukazu-portal-react/index.css';

function App() {
  return (
    <Portal
      portalCode="YOUR_PORTAL_CODE"
      objectCode="YOUR_OBJECT_CODE"
      locale="en"
    />
  );
}

---

Usage by Module

Calendar (availability + booking form)

Render the calendar for a specific property by supplying both portalCode and objectCode. No pageType is needed — the calendar is the default when an objectCode is present.

<Portal
  portalCode="YOUR_PORTAL_CODE"
  objectCode="YOUR_OBJECT_CODE"
  locale="en"
/>

Search

Render the property search page by omitting objectCode. You can pre-populate filter values via the filters prop.

<Portal
  portalCode="YOUR_PORTAL_CODE"
  locale="en"
  filters={{
    persons_min: '2',
    arrival_date: '2024-07-01',
    departure_date: '2024-07-14'
  }}
/>

Reviews

Render the reviews page for a specific property by passing objectCode together with pageType="reviews".

<Portal
  portalCode="YOUR_PORTAL_CODE"
  objectCode="YOUR_OBJECT_CODE"
  pageType="reviews"
  locale="en"
/>

---

Direct website usage (no bundler required)

If you are not using a JavaScript bundler or a React application, you can use the self-contained website build instead. This single file includes React, every other dependency, and the stylesheet — drop it into your page and add a <div> with the right attributes.

1. Download or reference the file

After installing the package, copy the file from the package (or reference it from a CDN/local path):

• node_modules/bukazu-portal-react/build/portal.website.js

The bundle injects its own <style> element, so no stylesheet link is required. A companion node_modules/bukazu-portal-react/build/portal.website.css is published as well, for pages whose Content-Security-Policy forbids inline styles (style-src without 'unsafe-inline').

2. Add a host element

Place a <div class="bukazu-app"> with the following HTML attributes wherever you want the portal to appear:

Attribute	Required	Description
portal-code	✅	Your Bukazu portal identifier
object-code	—	Property code (omit for the Search module)
page	—	Set to "reviews" for the Reviews module
language	—	Locale: en | nl | de | fr | es | it, or a full BCP-47 tag such as nl-NL (default: en)
filters	—	JSON-encoded filters object (see filter keys in the props table below)
sentry-dsn	—	Sentry DSN for error reporting. Defaults to the DSN baked into the bundle; pass off to disable reporting

The host element is found by the bukazu-app class. Pages that carry no such element fall back to a single element with id="bukazu-app", which is what older embed snippets use.

3. Include the script and stylesheet

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My website</title>
  </head>
  <body>

    <!-- Calendar for a specific property -->
    <div class="bukazu-app"
         portal-code="YOUR_PORTAL_CODE"
         object-code="YOUR_OBJECT_CODE"
         language="en">
    </div>

    <!-- Property search page -->
    <div class="bukazu-app"
         portal-code="YOUR_PORTAL_CODE"
         language="en">
    </div>

    <script src="portal.website.js"></script>
  </body>
</html>

The script automatically initialises every .bukazu-app element it finds on the page when the DOM is ready. Multiple portals on the same page are supported, and loading the bundle twice is harmless — it re-renders the existing portals rather than mounting duplicates.

For advanced use the bundle exposes BukazuPortal.init(), BukazuPortal.mountPortal(element) and BukazuPortal.version as globals, so you can mount a portal into an element you inserted after page load.

---

Deploying the website bundle

The hosted copy of the website bundle that embedder sites load as /static/main.js is deployed to S3 from this repository by the Deploy to S3 workflow (.github/workflows/deploy-s3.yml). The bucket layout is fixed and unhashed:

Bucket key	Source
static/main.js	build/portal.website.js
static/main.css	build/portal.website.css
index.html, search.html, calendar.html, reviews.html	deploy/*.html (preview pages: an index linking to one page per portal type)

npm run deploy:assemble builds that tree locally into dist-deploy/ from an existing build/ (pass --source <dir> to use another bundle directory).

There are two ways a deploy happens:

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗