Dynamically Load Soundfont Instruments With React Context

[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.