@pepavlin/sheet-api-react

React components for working with musical sheets and chords, built on top of @pepavlin/sheet-api.

Installation

npm install @pepavlin/sheet-api-react

Demo

Check out the live demo to see all features in action:

npm run demo:install
npm run demo

The demo showcases:

• Multiple display styles (default, modern, smart, printCompact, experimental)
• HTML and PDF preview side-by-side
• Edit mode with live preview
• Chord visibility toggle
• Multi-column layouts

Usage

Sheet Display

import { SheetDisplay, Sheet } from "@pepavlin/sheet-api-react";

function SongSheet() {
    const sheetData = `
    [C]Amazing [F]grace
    How [G]sweet the [C]sound
  `;

    const sheet = new Sheet(sheetData);

    return (
        <SheetDisplay
            sheet={sheet}
            title='Amazing Grace'
            hideChords={false}
            variant='default'
            columns={1}
        />
    );
}

PDF Export

import { PdfSheetDisplay, Sheet } from "@pepavlin/sheet-api-react";
import { PDFViewer } from "@react-pdf/renderer";

function SongPDF() {
    const sheetData = `[C]Amazing [F]grace`;
    const sheet = new Sheet(sheetData);

    return (
        <PDFViewer width='100%' height='600px'>
            <PdfSheetDisplay
                sheet={sheet}
                title='Amazing Grace'
                variant='default'
                hideChords={false}
            />
        </PDFViewer>
    );
}

Editable Sheet

import { SheetDisplay, Sheet } from "@pepavlin/sheet-api-react";
import { useState } from "react";

function EditableSong() {
    const [sheetData, setSheetData] = useState("[C]Amazing [F]grace");
    const [title, setTitle] = useState("Amazing Grace");

    const sheet = new Sheet(sheetData);

    return (
        <SheetDisplay
            sheet={sheet}
            title={title}
            editMode={true}
            hideChords={false}
            onChange={(data, newTitle) => {
                setSheetData(data);
                setTitle(newTitle);
            }}
        />
    );
}

Components

SheetDisplay

Displays a complete song sheet with text and chords.

Props:

• sheet: Sheet - Sheet instance from @pepavlin/sheet-api
• title?: string - Song title
• hideChords: boolean - Whether to hide chord symbols
• variant?: SheetStyle - Display style ('default', 'default-preview', 'modern', 'smart', 'printCompact', 'experimental')
• columns?: number - Number of columns for layout (default: 1)
• editMode?: boolean - Enable edit mode
• onChange?: (sheetData: string, title: string) => void - Callback for edit mode changes
• titlePlaceholder?: string - Placeholder for title input in edit mode
• contentPlaceholder?: string - Placeholder for content input in edit mode

PdfSheetDisplay

Renders sheet as a PDF document using @react-pdf/renderer.

Props:

• sheet: Sheet - Sheet instance from @pepavlin/sheet-api
• title?: string - Song title
• variant?: SheetStyle - Display style
• hideChords: boolean - Whether to hide chord symbols

EditSheet

Standalone editor component for editing sheet content.

Props:

• sheet: Sheet - Sheet instance
• title: string - Current title
• onChange: (sheetData: string, title: string) => void - Change callback
• titlePlaceholder?: string - Title input placeholder
• contentPlaceholder?: string - Content input placeholder

License

ISC