Skip to content

Commit

Permalink
Fixing README
Browse files Browse the repository at this point in the history
  • Loading branch information
@4lejandrito
4lejandrito committed Dec 26, 2022
1 parent 22d6dc2 commit 6257484
Showing 1 changed file with 13 additions and 13 deletions.
26 changes: 13 additions & 13 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 | null`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. 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. |

### Hooks

Expand Down

0 comments on commit 6257484

Please sign in to comment.