Accidental

import { Accidental } from '@musedlab/symbols/pitch';

The accidental component can be used to render an accidental symbol, from triple flat to triple sharp.

import React, { useState } from 'react';

import { Accidental } from '../src/Accidental';

export function AccidentalDemo() {

const [alt, setAlt] = useState(0);

return (

<div>

<input

type="range"

min={-3}

max={3}

value={alt}

onChange={(evt) => {

setAlt(parseInt(evt.target.value));

}}

/>

<span style={{ fontSize: '60px' }}>

C <Accidental alter={alt} />

</span>

</div>

);

}

C