Overview

A collection of widgets for React projects.

Prerequisites

• React v19

Installation

npm install @playbooks/widgets

Quick Start

import '@playbooks/widgets/styles.css';
import { PlaybooksModal } from '@playbooks/widgets';

function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <Div>
      <PlaybooksModal uuid="react-official-starter" options={{ theme: 'dark' }} />
    </Div>
  );
}

Global Options

These options can be passed into any Playbooks widget to control its behavior, styling, and event handling. Some of them, like the options property, are only applied to the <PlaybooksModal /> widget at the moment.

| Option | Type | Default | Description | | :--- | :--- | :--- | :--- | | uuid | string | undefined | Required. The unique identifier to link and display the appropriate play. | | theme | string | undefined | Whether to display the widget with a dark or light theme. | | callbacks | object | {} | Functions triggered by various widget events. See Callbacks Object | | options | object | {} | General configuration settings for the widget. See Options Object | | tailwind | object | {} | A Tailwind override system for widget styles. See Tailwind Object |

Options Object

Passed via the options prop to configure the widget's base behavior.

| Property | Type | Default | Description | | :--- | :--- | :--- | :--- | | showSidebar | boolean | true | Toggles the availability of the modal sidebar. |

Callbacks Object

Passed via the callbacks prop. Use these to hook into the widget's lifecycle from your host application.

| Event | Type | Description | | :--- | :--- | :--- | | onLoad | () => void | Fires when the widget has successfully mounted and loaded the play data. | | onError | (error: Error) => void | Fires if the widget fails to render or fetch the play. |

Tailwind Object

Passed via the tailwind prop. Allows deep customization of the widget's internal elements based on the @ehubbell/html library structure. You will need to review the package to see which elements are customizable. For example, you could do the following:

  <PlaybooksModal
    uuid='astro-offocial-starter'
    tailwind={{ btn: { border: 'border', bgColor: 'bg-blue-600 dark:bg-blue-400', hover: 'hover:bg-blue-500' } }}
  />

Questions

Please reach out to [email protected] with any technical questions and / or issues.

Author

• Playbooks XYZ
• [email protected]

Contributions

Please open a Github Issue describing the PR you want to submit before starting work.