hotelblockstest

---

title: Web Component Library

This is a library of web components that can be easily consumed and used in web projects. It provides components for displaying hotel blocks and related functionality. The library supports both plain web usage and integration with React.

Table of Contents

• Web Consumption
• React Integration
• Contributing

Web Consumption

To consume the web components in a web project, follow these steps:

1. Add the following HTML markup where you want to display the hotel blocks:

   <div id="hotelblocks-container"></div>

2. Include the library's JavaScript file using the following script tag in your HTML file:

   <script src="https://www.unpkg.com/hotelblockstest@latest/dist/web/index.js"></script>

3. Create an instance of the button component using the following JavaScript code:

   <script>
     var Button = HotelBlocksComponents.Render("hotelblocks-container");
   </script>

React Consumption

1. Install the library using npm or yarn:

   npm install hotelblockstest

2. Import the required components from the library in your React component file:

   import {
     ThemeProvider,
     Button,
     SearchCard,
   } from "hotelblockstest/dist/react";

3. Wrap your React components with the ThemeProvider component to set the desired theme color:

   <ThemeProvider color="blue">
   <Button label="hello" />
   <SearchCard />
   </ThemeProvider>