{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"You can find the working example for this lesson in the "},{"type":"text","marks":[{"type":"code"}],"text":"code/03-react-piano/03.09-connecting-to-a-keyboard"},{"type":"text","text":" folder."}]}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"In the "},{"type":"text","marks":[{"type":"code"}],"text":"Key"},{"type":"text","text":" component, we will use "},{"type":"text","marks":[{"type":"code"}],"text":"onDown()"},{"type":"text","text":" and "},{"type":"text","marks":[{"type":"code"}],"text":"onUp()"},{"type":"text","text":" methods to handle "},{"type":"text","marks":[{"type":"code"}],"text":"keypress"},{"type":"text","text":" events. Let's open the "},{"type":"text","marks":[{"type":"code"}],"text":"Key.tsx"},{"type":"text","text":" and create a type alias "},{"type":"text","marks":[{"type":"code"}],"text":"PressCallback"},{"type":"text","text":" which is a function called on press event. We will use this callback in the new "},{"type":"text","marks":[{"type":"code"}],"text":"onDown()"},{"type":"text","text":" and "},{"type":"text","marks":[{"type":"code"}],"text":"onUp()"},{"type":"text","text":" methods in the "},{"type":"text","marks":[{"type":"code"}],"text":"KeyProps"},{"type":"text","text":" type:"}]},{"type":"codeMirror","attrs":{"mode":"text/typescript","uniqueId":"ovebMcWlzkJZob1x4Vvrp","locality":0,"loading":false,"url":"https://gitlab.com/fullstackio/newline/courses/fullstack-react-with-typescript-course/module_03/lesson_03.09/.../code/03-react-piano/03.09-connecting-to-a-keyboard/src/components/Key/Key.tsx#L6","displayName":"03-react-piano/03.09-connecting-to-a-keyboard/src/components/Key/Key.tsx","startLine":"6","endLine":"14","codeQuery":null,"readOnly":false,"highlightLines":[]},"content":[{"type":"text","text":"type PressCallback = () => void\ntype KeyProps = {\n type: NoteType\n label: string\n disabled?: boolean\n\n onUp: PressCallback\n onDown: PressCallback\n}"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"These methods exist now in "},{"type":"text","marks":[{"type":"code"}],"text":"KeyProps"},{"type":"text","text":", and we can use them in "},{"type":"text","marks":[{"type":"code"}],"text":"onMouseDown()"},{"type":"text","text":" and "},{"type":"text","marks":[{"type":"code"}],"text":"onMouseUp()"},{"type":"text","text":" props for the "},{"type":"text","marks":[{"type":"code"}],"text":"button"},{"type":"text","text":" element."}]},{"type":"codeMirror","attrs":{"mode":"text/typescript","uniqueId":"O8_ddB7dEl7LvLJnha_f-","locality":0,"loading":false,"url":"https://gitlab.com/fullstackio/newline/courses/fullstack-react-with-typescript-course/module_03/lesson_03.09/.../code/03-react-piano/03.09-connecting-to-a-keyboard/src/components/Key/Key.tsx#L16","displayName":"03-react-piano/03.09-connecting-to-a-keyboard/src/components/Key/Key.tsx","startLine":"16","endLine":"34","codeQuery":null,"readOnly":false,"highlightLines":[]},"content":[{"type":"text","text":"export const Key: FunctionComponent = ({\n type,\n label,\n onDown,\n onUp,\n ...rest\n}) => {\n return (\n \n {label}\n \n )\n}"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Open "},{"type":"text","marks":[{"type":"code"}],"text":"src/components/Keyboard/Keyboard.tsx"},{"type":"text","text":" and update the component code:"}]},{"type":"codeMirror","attrs":{"mode":"text/typescript","uniqueId":"9IBejcKBNTS6QcRaO9Yz3","locality":0,"loading":false,"url":"https://gitlab.com/fullstackio/newline/courses/fullstack-react-with-typescript-course/module_03/lesson_03.09/.../code/03-react-piano/03.09-connecting-to-a-keyboard/src/components/Keyboard/Keyboard.tsx","displayName":"03-react-piano/03.09-connecting-to-a-keyboard/src/components/Keyboard/Keyboard.tsx","startLine":"1","endLine":"33","codeQuery":null,"readOnly":false,"highlightLines":[]},"content":[{"type":"text","text":"import { FunctionComponent } from \"react\"\n // ...\nimport { notes, MidiValue } from \"../../domain/note\"\n // ...\nexport type KeyboardProps = {\n loading: boolean\n play: (note: MidiValue) => Promise\n stop: (note: MidiValue) => Promise\n}\n\nexport const Keyboard: FunctionComponent = ({\n loading,\n stop,\n play\n}) => (\n

\n {notes.map(({ midi, type, index, octave }) => {\n const label = selectKey(octave, index)\n return (\n play(midi)}\n onUp={() => stop(midi)}\n />\n )\n })}\n

\n)"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"The "},{"type":"text","marks":[{"type":"code"}],"text":"Keyboard"},{"type":"text","text":" now has props that will consume "},{"type":"text","marks":[{"type":"code"}],"text":"loading"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"play()"},{"type":"text","text":", and "},{"type":"text","marks":[{"type":"code"}],"text":"stop()"},{"type":"text","text":" provided by the adapter. We use the "},{"type":"text","marks":[{"type":"code"}],"text":"loading"},{"type":"text","text":" flag to disable the keys to forbid the user from pressing them while the keyboard is not ready."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"The "},{"type":"text","marks":[{"type":"code"}],"text":"play()"},{"type":"text","text":" and "},{"type":"text","marks":[{"type":"code"}],"text":"stop()"},{"type":"text","text":" methods are typed with "},{"type":"text","marks":[{"type":"code"}],"text":"(note: MidiValue) => Promise"},{"type":"text","text":" signature. What is "},{"type":"text","marks":[{"type":"code"}],"text":"Promise"},{"type":"text","text":"? By using "},{"type":"text","marks":[{"type":"code"}],"text":"Promise<>"},{"type":"text","text":", we can declare an "},{"type":"text","marks":[{"type":"code"}],"text":"async"},{"type":"text","text":" function. Since every async function returns a promise object, TypeScript uses this signature as well."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"The "},{"type":"text","marks":[{"type":"code"}],"text":"void"},{"type":"text","text":" symbol means that this function doesn't return any value. In some cases, functions that don't return anything are called "},{"type":"text","marks":[{"type":"italic"}],"text":"procedures"},{"type":"text","text":". For example:"}]},{"type":"codeMirror","attrs":{"mode":"javascript","uniqueId":"7HRUSrHCRkGkIdZy0sp9W","locality":0,"loading":false,"url":null,"displayName":"","startLine":null,"endLine":null,"codeQuery":null,"readOnly":false,"highlightLines":[]},"content":[{"type":"text","text":"// Returns a number, so its return-type is a number.\nfunction add(a: number, b: number): number {\n return a + b;\n}\n\nconst sum = add(1, 2);\n// It returns 3, so sum === 3.\n\nfunction greet(name: string): void {\n console.log(`Hello ${name}!`);\n}\n\nconst result = greet('Alex');\n// It doesn't return anything, so result === undefined"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Now we only have to actually connect our "},{"type":"text","marks":[{"type":"code"}],"text":"Keyboard"},{"type":"text","text":" to the Soundfont provider, and we're there!"}]}]}

How to Handle Keypress Events in a React Piano Keyboard