# Is UIKit a good fit for my use case?
**URL:** https://community.sendbird.com/t/is-uikit-a-good-fit-for-my-use-case/8127
**Category:** Sendbird Chat UIKit
**Tags:** uikit, question, javascript
**Created:** [August 26, 2023, 9:50pm UTC](https://community.sendbird.com/t/is-uikit-a-good-fit-for-my-use-case/8127 "2023-08-26T21:50:48Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@cgsully](https://community.sendbird.com/u/cgsully)
#### Post date: [August 26, 2023, 9:50pm UTC](https://community.sendbird.com/t/is-uikit-a-good-fit-for-my-use-case/8127/1 "2023-08-26T21:50:48Z")
**[Problem/Question]**
I want to build a web chat experience (using React) where I don’t want to show the ChannelList, but instead default to a fixed distinct channel between 2 users. I want to display only the UI for the conversation between the 2 users. I’d be OK just hiding the ChannelList (UI on the left) and the ChannelSettings (UI on the right).
Further more, I want to automatically create that channel before loading the chat page. For this, I see 2 options: 1) using the platform API to create the channel on my server and sending down the channelUrl and 2) using the JS Chat SDK on the client side.
Is it possible to do this through UIKit? i.e. does UIKit provide access to the underlying sdk to do this?
---
### Author:  [@Tyler](https://community.sendbird.com/u/Tyler)
#### Post date: [August 29, 2023, 3:28am UTC](https://community.sendbird.com/t/is-uikit-a-good-fit-for-my-use-case/8127/2 "2023-08-29T03:28:00Z")
Hello @cgsully,
As you’ve already hinted to, there are really two different components to this use case.
1. Displaying the distinct conversation on the client side
2. Automatic creation of the channel
For #1, the UIKit is a perfectly acceptable solution. You are not required to use all components of the UIKit. You can certainly use only the `Conversation` component and pass in a `channelUrl` of the channel you’ve already created.
For #2, the Platform API is probably the better solution in the long term. Creating the channel on your backend service and then passing that `channelUrl` to the client side would be the most efficient and secure way of handling automatic channel creation.
That being said, the UIKits to expose the underlying SDK which does provide you complete access to all the standard methods that the SDK has to offer. Just note that you’ll only be able to access the SDK in a component or hook that exists within the the `SendbirdProvider` HOC.
Here is an example of how you can access that underlying SDK. The example shows both hooks and HOC access: [Sendbird UIKit - Customized App - StackBlitz](https://stackblitz.com/edit/sendbird-react-uikit-customized-app?file=src%2FCustomizedAppHook.jsx)
---
### Author:  [@cgsully](https://community.sendbird.com/u/cgsully)
#### Post date: [August 29, 2023, 6:03am UTC](https://community.sendbird.com/t/is-uikit-a-good-fit-for-my-use-case/8127/4 "2023-08-29T06:03:36Z")
Thanks for the detailed response.
Can you point me to an example of using just the Conversation component with channelUrl?
Until I get that to work, I was trying to just show one single channel using ChannelList queries as such:
```auto
const [queries] = useState({
channelListQuery: {
channelUrlsFilter: [channel_url],
},
});
```
But there is no effect on the ChannelList.
Any idea what I might be doing wrong?
Thanks!
---
### Author:  [@Tyler](https://community.sendbird.com/u/Tyler)
#### Post date: [August 29, 2023, 7:05am UTC](https://community.sendbird.com/t/is-uikit-a-good-fit-for-my-use-case/8127/5 "2023-08-29T07:05:14Z")
I don’t think an example of just the `Conversation` component is really necessary. You can simply look at the example I’ve provided and see that I import the `Conversation` component as `SBConversation` and then pass in a `channelUrl`.
In terms of the problem problem you’re having with the `ChannelList`.
It should be `const queries` not `const [queries]`.
```auto
const queries = useMemo(() => ({
channelListQuery: {
// Should be an instance of GroupChannelListQueryParams
// https://sendbird.com/docs/chat/v4/javascript/ref/interfaces/_sendbird_chat_groupChannel.GroupChannelListQueryParams.html
includeEmpty: true,
limit: 50,
order: 'chronological',
},
applicationUserListQuery: {
// Should be an instance of ApplicaitonUserListQuery
// https://sendbird.com/docs/chat/v4/javascript/ref/interfaces/_sendbird_chat.ApplicationUserListQueryParams.html
nicknameStartsWithFilter: 'Jackson',
},
}));
```
> **[Sendbird UIKit - Custom Channel List Queries - StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-channel-list-queries?file=src%2FCustomizedApp.jsx)**
>
> An example of custom channel list queries in the Sendbird React UIKit
---
### Author:  [@cgsully](https://community.sendbird.com/u/cgsully)
#### Post date: [August 29, 2023, 8:10am UTC](https://community.sendbird.com/t/is-uikit-a-good-fit-for-my-use-case/8127/6 "2023-08-29T08:10:02Z")
Thanks for the reply. I incorporated your suggestion.
Somehow I am having trouble with specifically channelUrlsFilter and userIdsFilter
I also tried using those in this stackblitz example and no luck: [Sendbird UIKit - Custom Channel List Queries (forked) - StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-channel-list-queries-tiewj2?file=package.json)
All the channels still continue showing up.
---
### Author:  [@Tyler](https://community.sendbird.com/u/Tyler)
#### Post date: [August 29, 2023, 8:39am UTC](https://community.sendbird.com/t/is-uikit-a-good-fit-for-my-use-case/8127/7 "2023-08-29T08:39:15Z")
You’re using `userIdsFilter` incorrectly here.
In the comment of the sample I provided, it’s stated that you should be providing an instance of [GroupChannelListQueryParams](https://sendbird.com/docs/chat/sdk/v4/javascript/ref/interfaces/_sendbird_chat_groupChannel.GroupChannelListQueryParams.html)
So, `userIdsFilter` needs to be an instance of [GroupChannelUserIdsFilter](https://sendbird.com/docs/chat/sdk/v4/javascript/ref/interfaces/_sendbird_chat_groupChannel.GroupChannelUserIdsFilter.html).
`channelUrlsFilter` is of type `Array`
>
So if you wanted to use `userIdsFilter` you would do something like:
```auto
const queries = useMemo(
() => ({
channelListQuery: {
// Should be an instance of GroupChannelListQueryParams
// https://sendbird.com/docs/chat/v4/javascript/ref/interfaces/_sendbird_chat_groupChannel.GroupChannelListQueryParams.html
includeEmpty: true,
limit: 50,
order: 'chronological',
userIdsFilter: {
includeMode: true,
queryType: 'OR',
userIds: ['testUser01', '567043'],
},
},
applicationUserListQuery: {
// Should be an instance of ApplicaitonUserListQuery
// https://sendbird.com/docs/chat/v4/javascript/ref/interfaces/_sendbird_chat.ApplicationUserListQueryParams.html
nicknameStartsWithFilter: 'Jackson',
},
}),
[]
);
```
> **[Sendbird UIKit - Custom Channel List Queries - Community - StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-channel-list-queries-rzebml?file=src%2FCustomizedApp.jsx%3AL12)**
>
> An example of custom channel list queries in the Sendbird React UIKit
---
### Author:  [@cgsully](https://community.sendbird.com/u/cgsully)
#### Post date: [August 29, 2023, 8:52am UTC](https://community.sendbird.com/t/is-uikit-a-good-fit-for-my-use-case/8127/8 "2023-08-29T08:52:48Z")
Oops, actually that’s exactly what I am doing. I realized my prior mistake when I was looking at the documentation you pointed to. Here’s exactly what my query looks like now:
```auto
const queries = useMemo(
() => ({
channelListQuery: {
includeEmpty: true, // tried without this as well
limit: 50, // tried without this as well
order: "chronological", // tried without this as well
userIdsFilter: {
includeMode: true, // tried without this as well
queryType: "AND", // tried without this and using "OR"
userIds: ["user-0"],
},
},
}),
[]
);
```
Here I want to show only channels with “user-0” in it.
No matter what I change inside ``, it has no impact. It seems to be always rendering the default UI.
Also, what about channelUrlsFilter?
Is there some top level change or initialization that I am missing?
Appreciate your patient with me!
Thanks!
---
### Author:  [@Tyler](https://community.sendbird.com/u/Tyler)
#### Post date: [August 29, 2023, 9:59am UTC](https://community.sendbird.com/t/is-uikit-a-good-fit-for-my-use-case/8127/9 "2023-08-29T09:59:50Z")
Out of curiosity, are you clicking the custom query button at the very top of the demo? If not, it will only ever render the default query.
---
### Author:  [@cgsully](https://community.sendbird.com/u/cgsully)
#### Post date: [August 29, 2023, 2:56pm UTC](https://community.sendbird.com/t/is-uikit-a-good-fit-for-my-use-case/8127/10 "2023-08-29T14:56:34Z")
Yes, I am clicking the “Custom Query” button. For the default channelListQuery in the example, I see the ordering of channels getting updated, but the two specific filters I am interested in – channelUrlsFilter and userIdsFilter – seem to have no effect.
---
### Author:  [@cgsully](https://community.sendbird.com/u/cgsully)
#### Post date: [August 29, 2023, 4:03pm UTC](https://community.sendbird.com/t/is-uikit-a-good-fit-for-my-use-case/8127/11 "2023-08-29T16:03:37Z")
Update – I was examining the React DOM using the React Dev Tools Chrome Extension and for some reason, I am not seeing any of the attributes I am setting for ChannelList in the React DOM. For example, 1) I tried setting activeChannelUrl on ChannelList directly through the dev tool and that correctly updated the active channel as expected.
2) Then I tried adding the same activeChannelUrl prop in my code, but I did not see it in the React DOM in the dev tool.
```auto
```
Now I am suspecting I am not setting up the custom app correctly 😕
---
### Author:  [@cgsully](https://community.sendbird.com/u/cgsully)
#### Post date: [August 29, 2023, 4:24pm UTC](https://community.sendbird.com/t/is-uikit-a-good-fit-for-my-use-case/8127/12 "2023-08-29T16:24:22Z")
Figured it out.
I was importing SendbirdProvider incorrectly (doh!) as:
`import SendbirdProvider from "@sendbird/uikit-react/App";`
instead of:
`import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";`
Thanks for the support!
---
### Author:  [@Tyler](https://community.sendbird.com/u/Tyler)
#### Post date: [August 30, 2023, 1:46am UTC](https://community.sendbird.com/t/is-uikit-a-good-fit-for-my-use-case/8127/13 "2023-08-30T01:46:44Z")
That would explain it! The `App` is an “All in One” app. Hopefully this allows you to implement just the `Channel` now as well.