React JS

PlugHub React SDK


The PlugHub React SDK is designed to simplify the integration of PlugHub functionalities into React applications. This SDK provides a set of ready-made components that encapsulate the logic and interactions with the PlugHub API, enabling developers to quickly build and deploy feature-rich booking interfaces.

Key Features

  • Context Management: The PlugHubContext manages API connections and shares state across components.
  • Modular Components: Components like RepoGroupers, Items, and Repositories allow for building flexible, dynamic interfaces tailored to your application's needs.
  • Ease of Use: Pre-built components reduce boilerplate code and accelerate development.

Getting Started

To begin using the PlugHub React SDK, install the package via npm or yarn, and wrap your application in the PlugHubContext provider. Detailed setup instructions will follow in the subsequent sections.

Setup and Configuration


npm install @nanpos/plughub-react
# or
yarn add @nanpos/plughub-react


Import the SDK components into your React application and configure them as shown in the examples below. Make sure to wrap your app's root component with PlugHubContext to ensure all components have access to the necessary context.

import { PlugHubContext, Repositories, Items } from "plughub-react-sdk";
function App() {
  return (
    <PlugHubContext apiKey="your_api_key">
        <Repositories />
        <Items />

3. Component Documentation

Each component should have its own section detailing its props, usage, and example scenarios.



Renders a list of repositories. Can be customized with various props to filter or sort the displayed data.


  • filter: Criteria used to filter repositories.
  • sort: Determines the order in which repositories are displayed.

Example Usage

<Repositories filter={{ type: "event" }} sort="name" />

4. Examples and Tutorials

Create detailed tutorials and examples that show how to use multiple components together to build real-world interfaces.

Examples and Tutorials

Building a Ticket Booking Interface

This tutorial will guide you through building a simple ticket booking interface using the Repositories, Items, and RepoGroups components.

Step 1: Setup the Repository List

...detailed steps and code snippets...

Step 2: Add Item Selection

...detailed steps and code snippets...

Step 3: Implement Booking Functionality

...detailed steps and code snippets...