Going back to 1.1.2 until the alpha is published

README.md

@@ -33,19 +33,19 @@ Check out [the storybook](https://react-guitar.com/storybook) for more advanced
 
 ### Props
 
-| Name           | Description                                                                                                                                                                                                                                                                              |
-| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`           | An optional id in case several guitars are on the screen at the same time. This is used to generate the radio button names used internally which must be unique. If not specified an autoincremented id will be generated.                                                               |
-| `className`    | A CSS class string to apply to the container element.                                                                                                                                                                                                                                    |
-| `strings`      | An array where each number represents the fret the string is pressed on (`0` means open string and `-1` muted). `[0, 1, 2, 2, 0, -1]` is an `A minor` in a standard guitar and `[3, 0, 0, 0]` is a `C major` in a ukelele.                                                               |
-| `frets`        | An object with the shape `{ from: number amount: number }` to configure the frets of the guitar (`{ from: 0, amount: 22 }` by default). It can start on any fret which is useful for displaying just a chord instead of the whole guitar.                                                |
-| `lefty`        | A boolean to configure the guitar for left handed people like me.                                                                                                                                                                                                                        |
-| `center`       | A boolean to indicate if the current fretting should be centered. If set to `true` the guitar horizontal scroll will be set so that the middle fret is centered.                                                                                                                         |
-| `renderFinger` | A function `(string: number, fret: number) => JSX.Element` that will be used to render the content of the white bubble used for the fingers. This can be used to render the note name. If the function returns `null`, the finger will not be rendered at all, and won't be interactive. |
-| `theme`        | A theme object to customise the guitar look and feel. See [Theming](#theming).                                                                                                                                                                                                           |
-| `playOnHover`  | A boolean to indicate if hovering with the mouse should trigger play events.                                                                                                                                                                                                             |
-| `onChange`     | A function `(strings: number[]) => void` that will be called when a string is press/unpressed. If not present the guitar will be read only.                                                                                                                                              |
-| `onPlay`       | A function `(string: number) => void` that will be called each time the user plays a string (hovering with the mouse). This can be used to play the sound of the string.                                                                                                                 |
+| Name           | Description                                                                                                                                                                                                                               |
+| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`           | An optional id in case several guitars are on the screen at the same time. This is used to generate the radio button names used internally which must be unique. If not specified an autoincremented id will be generated.                |
+| `className`    | A CSS class string to apply to the container element.                                                                                                                                                                                     |
+| `strings`      | An array where each number represents the fret the string is pressed on (`0` means open string and `-1` muted). `[0, 1, 2, 2, 0, -1]` is an `A minor` in a standard guitar and `[3, 0, 0, 0]` is a `C major` in a ukelele.                |
+| `frets`        | An object with the shape `{ from: number amount: number }` to configure the frets of the guitar (`{ from: 0, amount: 22 }` by default). It can start on any fret which is useful for displaying just a chord instead of the whole guitar. |
+| `lefty`        | A boolean to configure the guitar for left handed people like me.                                                                                                                                                                         |
+| `center`       | A boolean to indicate if the current fretting should be centered. If set to `true` the guitar horizontal scroll will be set so that the middle fret is centered.                                                                          |
+| `renderFinger` | A function `(string: number, fret: number) => JSX.Element` that will be used to render the content of the white bubble used for the fingers. This can be used to render the note name.                                                    |
+| `theme`        | A theme object to customise the guitar look and feel. See [Theming](#theming).                                                                                                                                                            |
+| `playOnHover`  | A boolean to indicate if hovering with the mouse should trigger play events.                                                                                                                                                              |
+| `onChange`     | A function `(strings: number[]) => void` that will be called when a string is press/unpressed. If not present the guitar will be read only.                                                                                               |
+| `onPlay`       | A function `(string: number) => void` that will be called each time the user plays a string (hovering with the mouse). This can be used to play the sound of the string.                                                                  |
 
 ### Hooks
 

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0-alpha.0",
+  "version": "1.1.2",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {

packages/react-guitar-theme-coco/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-guitar-theme-coco",
-  "version": "1.2.0-alpha.0",
+  "version": "1.1.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "author": "Alejandro Tardín <[email protected]>",
@@ -26,6 +26,6 @@
     "@types/react": "^18.0.15",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
-    "react-guitar": "^1.2.0-alpha.0"
+    "react-guitar": "^1.1.2"
   }
 }

packages/react-guitar-theme-dark/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-guitar-theme-dark",
-  "version": "1.2.0-alpha.0",
+  "version": "1.1.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "author": "Alejandro Tardín <[email protected]>",
@@ -26,6 +26,6 @@
     "@types/react": "^18.0.15",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
-    "react-guitar": "^1.2.0-alpha.0"
+    "react-guitar": "^1.1.2"
   }
 }

packages/react-guitar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-guitar",
-  "version": "1.2.0-alpha.0",
+  "version": "1.1.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "author": "Alejandro Tardín <[email protected]>",

packages/react-guitar/src/index.tsx

@@ -81,7 +81,7 @@ export default function Guitar(props: {
   }
   lefty?: boolean
   center?: boolean
-  renderFinger?: (string: number, fret: number) => JSX.Element | null
+  renderFinger?: (string: number, fret: number) => JSX.Element
   theme?: Theme
   playOnHover?: boolean
   onChange?: (strings: number[]) => void
@@ -204,59 +204,53 @@ export default function Guitar(props: {
               frets={frets}
               onMouseEnter={() => playOnHover && props.onPlay?.(string)}
             >
-              {(fret) => {
-                const fingerContent = renderFinger?.(
-                  string,
-                  fret === -1 ? 0 : fret
-                )
-                return (
-                  <label>
-                    <span className="sr-only">
-                      Fret {fret} {fret === -1 && '(Mute)'}.
-                    </span>
-                    {fret >= 0 && (
-                      <span
-                        className="actual-string"
-                        style={{
-                          opacity: currentFret === -1 ? 0.2 : 1,
-                          borderBottom: `solid 0.2em ${color(
-                            theme.string.color(string)
-                          ).darken(0.35)}`,
-                          backgroundColor: theme.string.color(string),
-                        }}
-                      />
-                    )}
-                    <input
-                      disabled={!props.onChange || fingerContent === null}
-                      type="radio"
-                      name={`${id}-string-${string}`}
-                      value={fret}
-                      checked={currentFret === fret}
-                      onChange={(e) => {
-                        props.onChange?.(set(strings, string, fret))
-                        e.target.focus()
+              {(fret) => (
+                <label>
+                  <span className="sr-only">
+                    Fret {fret} {fret === -1 && '(Mute)'}.
+                  </span>
+                  {fret >= 0 && (
+                    <span
+                      className="actual-string"
+                      style={{
+                        opacity: currentFret === -1 ? 0.2 : 1,
+                        borderBottom: `solid 0.2em ${color(
+                          theme.string.color(string)
+                        ).darken(0.35)}`,
+                        backgroundColor: theme.string.color(string),
                       }}
-                      onClick={() =>
-                        fret === currentFret && releaseString(string)
-                      }
-                      onKeyDown={(e) => {
-                        switch (e.keyCode) {
-                          case 80:
-                            props.onPlay?.(string)
-                            break
-                          case 13:
-                            releaseString(string)
-                            e.preventDefault()
-                        }
-                      }}
-                      onFocus={() => setFocusedString(string)}
                     />
-                    {fingerContent !== null && (
-                      <span className="finger">{fingerContent}</span>
-                    )}
-                  </label>
-                )
-              }}
+                  )}
+                  <input
+                    disabled={!props.onChange}
+                    type="radio"
+                    name={`${id}-string-${string}`}
+                    value={fret}
+                    checked={currentFret === fret}
+                    onChange={(e) => {
+                      props.onChange?.(set(strings, string, fret))
+                      e.target.focus()
+                    }}
+                    onClick={() =>
+                      fret === currentFret && releaseString(string)
+                    }
+                    onKeyDown={(e) => {
+                      switch (e.keyCode) {
+                        case 80:
+                          props.onPlay?.(string)
+                          break
+                        case 13:
+                          releaseString(string)
+                          e.preventDefault()
+                      }
+                    }}
+                    onFocus={() => setFocusedString(string)}
+                  />
+                  <span className="finger">
+                    {renderFinger?.(string, fret === -1 ? 0 : fret)}
+                  </span>
+                </label>
+              )}
             </Frets>
           </fieldset>
         ))}