piano-notes-book/src/components/Notation/index.tsx

import * as React from 'react';
import * as Vexflow from 'vexflow';

export const Notation = () => {
	const ref = React.useRef<HTMLElementTagNameMap['div']>(null);
	const id = React.useId();

	React.useEffect(() => {
		const render = (id: string) => {
			const el = window.document.getElementById(id);
			if (!el) {
				return;
			}

			el.innerHTML = '';
			const { Factory } = Vexflow;
			const width = el.clientWidth;
			const vf = new Factory({
				renderer: { elementId: id, width, height: 300 },
			});

			vf.getContext().scale(0.75, 0.75);

			const score = vf.EasyScore();
			let currentX = 20;
			let currentY = 40;

			const getCurrentBar = (width: number) => {
				const system = vf.System({
					x: currentX,
					y: currentY,
					width,
				});
				currentX += width;
				return system;
			};

			let system = getCurrentBar(130);
			system.addStave({
				voices: [
					score.voice([
						...score.notes('D5/8'),
					], {
						time: '1/8',
					})
				]
			})
				.addClef('treble')
				.addKeySignature('Gm')
				.addTimeSignature('C')
				.setTempo(
					{
						name: 'Adagio.'
					},
					-30
				);

			system.addStave({
				voices: [
					score.voice([
						...score.notes('D3/8/r', { clef: 'bass' }),
					], {
						time: '1/8',
					})
				]
			})
				.addClef('bass')
				.addKeySignature('Gm')
				.addTimeSignature('C');

			system.addConnector('brace');
			system.addConnector('singleLeft');
			system.addConnector('singleRight');

			system = getCurrentBar(350);

			system
				.addStave({
					voices: [
						score.voice(
							[
								...score.tuplet(
									score.beam(
										score.notes('G5/16, B5, A5, G5, F#5, G5'),
									),
									{
										ratioed: false,
										notesOccupied: 4,
									}
								),
								...score.tuplet(
									score.beam(
										score.notes('G5/16, F5, G5, D6, F5, G5'),
									),
									{
										ratioed: false,
										notesOccupied: 4,
										yOffset: Infinity,
									}
								),
								// ...score.beam(score.notes('E5/8, D5')),
								...score.beam(score.notes('E5/8, D5')),
								...score.tuplet(
									score.beam(
										score.notes('D5/16, E5, F5, G5, A5, B5'),
									),
									{
										ratioed: false,
										notesOccupied: 4,
										yOffset: Infinity,
									}
								),
							]
						),
					]
				});

			system
				.addStave({
					voices: [
						score.voice([
							...score.beam(
								score.notes('(G3 B3 D4)/8, (G3 B3 D4)', { clef: 'bass' })
							),
							...score.beam(
								score.notes('(G3 B3 D4)/8, (G3 B3 D4)', { clef: 'bass' })
							),
							...score.beam(
								score.notes('(G3 C4)/8, (G3 B3)', { clef: 'bass' })
							),
							...score.beam(
								score.notes('(G3 B3)/8, (G3 B3)', { clef: 'bass' })
							),
						]),
					]
				});

			system.addConnector('singleLeft');
			system.addConnector('singleRight');

			vf.draw();
		};

		render(id);
	}, []);

	return (
		<div
			ref={ref}
			id={id}
		/>
	);
};