React(ウェブ用)仮想かなキーボードの作成

const onInput = ({val, isShiftInput}) => {
  if(!val) return
  setText(prev => {
    if(isShiftInput) {
      const tempText = prev.slice(0, -1)
      return `${tempText}${val}`
    } else {
      return `${prev}${val}`
    }
  })
}

const onEnterPress = () => {
  if(!text) return
  setTextLines(prev => {
    return [...prev, text]
  })
  setText('')
}

const onBackspacePress = () => {
  if(!text) return
  setText(prev => prev.slice(0, -1))
}

<KanaKeyboard
  onInput={onInput}
  onEnterPress={onEnterPress}
  onBackspacePress={onBackspacePress}
/>

const keyboardStyles = {
  padding: 1, // キーの間隔 数値
  borderColor: colors.darkPurple, // キーの輪郭色 文字列
  borderWidth: 1, // キーの輪郭線幅
  borderRadius: 5, // キーの角丸 数値
  symbolLabelSize: fontSize.xxxxxLarge, // 文字キーのラベルフォントサイズ 数値
  symbolLabelColor: colors.black, // 文字キーのラベル色 文字列
  enterIconSize: fontSize.xxxxLarge, // エンターキーのアイコンサイズ 数値
  enterIconColor: colors.darkPurple, // エンターキーのアイコン色 文字列
  shiftSymbolSize: fontSize.xLarge, // 濁点半濁点キー、ひらがなカタカナ切替キーのラベルフォントサイズ 数値
  shiftSymbolColor: colors.black, //  濁点半濁点キー、ひらがなカタカナ切替キーのラベル色 文字列
  paletBackgroundColor: colors.floralwhite, // 文字キー展開時の背景色 文字列
  paletSymbolColor: colors.black, // 文字キー展開時のラベル色 文字列
  emptyKeyColor: colors.floralwhite, // 無効キーの色 文字列
  backspaceIconSize: fontSize.xxxxLarge, // バックスペースキーのアイコンサイズ 数値
  backspaceIconColor: colors.darkPurple, // バックスペースキーのアイコン色 文字列
}

const keyboardSettings = {
  shiftVisible: true, // ひらがなカタカナ切替キーの有効無効 真偽値 無効時は無効キーになります
  backspaceVisible: true, // バックスペースキーの有効無効 真偽値 無効時は無効キーになります
  trackMouse: true, //マウス操作でのスワイプを許可する場合はtrue
  keySize: width / 6, // 各キーのサイズ 数値
}