Dynamically Load Soundfont Instruments With React Context
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[00:00 - 00:38] The instruments list. The last thing we do before we dive into render props and higher order components patterns is we'll create the instruments list to load them dynamically. This part requires a state that will be accessible from many components. So we'll use React context to share it. Create a new file, SRC, state, instrument, context, T.S. Here first let's define an expert context value type, expert type context value. It should have an instrument of type instrument name and the set instrument function. Set instrument should receive an instrument name and return nothing.
[00:39 - 01:18] Then define the instrument context. We'll do it using create context function from React. Expert const instrument. context equals create context with type of value context value. Pass in the instrument, default instrument and set instrument. Here is going to be a dummy function that does nothing. Now we expert the instrument context consumer, expert, const instrument, context, consumer, instrument, context, consumer. And also they use instrument hook that will use as a helper to get the instrument context values.
[01:19 - 02:03] Expert context use instrument is a hook that wraps. Use context, instrument context. Now define an index. T.S. file and re-expert instrument context, consumer and use instrument from the context. Now in the same file create a provider, new file, provider, T.S.X. An expert and instrument context provider. We can type it as F.C. So that we have children in the props. Here we'll store the instrument in the state, const, instrument, set instrument equals use state, default, instrument. And then we return instrument context.
[02:04 - 02:18] Provider, render the children, provide the value with instrument and set instrument function. Go to index. T.S. and re-expert everything from the provider. Great. Now we have the instrument's context.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)