Skip to main content

JSX/TSX React

Create View​

<ReactUI.WmsView doc={doc} />
Deprecated (v6.1.0): ReactUI.WmsView replaces ReactUI.MusicScoreView.
ReactUI.MusicScoreView is deprecated and will be removed in a future major release.
Existing code can be migrated by renaming ReactUI.MusicScoreView to ReactUI.WmsView.

Set Paint​

<ReactUI.WmsView doc={doc} paint={paint} />
💡
Paint is optional.

Set View Size

There are two ways to affect view size: zoom and staff size.

Set Zoom​

Set zoom:

<ReactUI.WmsView doc={doc} zoom="1.5" />
💡
Default zoom if omitted is 1.0.

Set Staff Size​

Set view size with given distance between bottom and top staff lines:

<ReactUI.WmsView doc={doc} staffSize="40px" />
💡
Default staff size is connected to default font size.
⚠️
Using units "cm", "mm", "in", etc. can give unpredictable result depending on device.

Live Example​