Channel provider - support multiple channels

[mizrachiran]

Hi there,

I'm looking into updating my client lib to the new version, where the ChannelProvider context was introduced.
I used to use multiple channels in my components and I wonder if I should wrap my component with multiple ChannelProviders, one for each channel, or if there is a way to have 1 channel provider with multiple channel names.

Would appreciate your support.

Thanks!

┆Issue is synchronized with this Jira Task by Unito

[VeskeR]

Hi @mizrachiran !

There is no way to provide a list of channel names for a ChannelProvider. Each ChannelProvider corresponds to a single channel name with its options.

If in your use case you intend to use different channel names inside one component, then you would need to wrap that component in multiple ChannelProvider like this:

<ChannelProvider channelName="your-channel-name">
  <ChannelProvider channelName="your-other-channel-name">
    <YourComponentWithMultipleChannels></YourComponentWithMultipleChannels>
  </ChannelProvider>
</ChannelProvider>

However, there is no strict restriction on where exactly you declare a ChannelProvider, as long as it wraps your component which uses the corresponding channel name. This means that if you use different channel names in different components, you can wrap them individually in a more structured way that would suit your app structure.
So you could have something like this:

// somewhere high in your component hierarchy you declare AblyProvider, usually in your App component
<AblyProvider client={client}>
  <ComponentAWrapper></ComponentAWrapper>
  <ComponentBWrapper></ComponentBWrapper>
</AblyProvider>

function ComponentAWrapper() {
  return (
    <ChannelProvider channelName="your-channel-name">
      <ComponentA></ComponentA>
    </ChannelProvider>
  );
}

function ComponentBWrapper() {
  return (
    <ChannelProvider channelName="your-other-channel-name">
      <ComponentB></ComponentB>
    </ChannelProvider>
  );
}

function ComponentA() {
  // uses 'your-channel-name' channel
  // ...
}

function ComponentB() {
  // uses 'your-other-channel-name' channel
  // ...
}