react-fretboard/src/components/Fretboard/Fretboard.tsx

import React, {FC} from 'react'
import * as PropTypes from 'prop-types'
import FretboardString from '../FretboardString/FretboardString'
import Fret from '../Fret/Fret'

const propTypes = {
  strings: PropTypes.number,
  frets: PropTypes.number,
  mirror: PropTypes.bool,
  fixedTunings: PropTypes.bool,
  displayTunings: PropTypes.bool,
  capoFret: PropTypes.number,
  fretted: PropTypes.arrayOf(PropTypes.number),
  landmarks: PropTypes.bool,
  frettedNames: PropTypes.arrayOf(PropTypes.string),
}

export type Props = PropTypes.InferProps<typeof propTypes>

const Fretboard: FC<Props> = ({
  strings = 6,
  frets = 24,
  mirror = false,
  capoFret = 0,
  fretted = [],
  landmarks = false,
  frettedNames = [],
}) => {
  const str: boolean[][] = new Array(strings)
    .fill(null)
    .map(() => new Array(frets)
      .fill(null)
      .map(() => false)
    )

  return (
    <div
      style={{
        border: '0.0625rem solid',
        boxSizing: 'border-box',
        userSelect: 'none',
      }}
    >
      {str!.map((f, stringNumber: number) => (
        <div
          style={{
            display: 'flex',
            flexDirection: mirror ? 'row-reverse' : 'row',
          }}
        >
          <Fret
            fretNumber={0}
            totalFrets={frets!}
            firstString={stringNumber === 0}
            strings={strings!}
            landmarks={landmarks}
            fretted={fretted![stringNumber] === 0}
            capoFret={capoFret}
            name={frettedNames![stringNumber]}
          >
            <FretboardString
              stringNumber={stringNumber}
            />
          </Fret>
          {f.map((_, i) => (
            <Fret
              fretNumber={i + 1}
              totalFrets={frets!}
              firstString={stringNumber === 0}
              strings={strings!}
              landmarks={landmarks}
              fretted={fretted![stringNumber] === i + 1}
              capoFret={capoFret}
              name={frettedNames![stringNumber]}
            >

              <FretboardString
                stringNumber={stringNumber}
              />
            </Fret>
          ))}
        </div>
      ))}
    </div>
  )
}

Fretboard.propTypes = propTypes

export default Fretboard