Chat hooks spec 1.0

[vishalnarkhede]

Purpose

Build a set of react hooks around Stream chat, which can be used on both react & react-native.

Note: We are only trying to evaluate this project right now, by collecting community feedback.

Currently we have separate react and react-native sdks, which provide some solid UI components. If the library user has a simple enough UI or simply wants to use the UI that we provide OOTB, all good. But plenty of time, we run into situations where users end up adding way too-many UI customisations, to the point where it looks like, they would be better off building their own UI. But its not always possible, since you need to do with alot of stateful business logic yourself, which we have within components. Also, having too many UI customisations also means more issues with upgrades.

Recently we have seen many end-users copying code or part of code of react hooks from both react and RN chat SDKs. They don't import the hook directly from library, either because hooks are too coupled with our context structure and state variables within component.

Objective here is to setup a separate repository/project to provide commonly used react hooks which serves to users who wants to build their own UI, but don't want to get into all the stateful logic around chat data, to make it usable for rich UI.

Advantages

• Lightweight in terms of peerDependencies, and thus much easier to setup than component SDKs.
• Hooks are common for both web and mobile. It makes it easier for end-user to implement Chat on both platforms, without dealing with our components separately. There might be few hooks which are platform dependent, but very few.
• Without UI, its much easier to write/maintain tests.

Building blocks

• Typescript
• Tests
• Solid documentation
• Examples

Usage

With all the hooks, we will need access to common values such as - chatClient, in most of the hooks. So instead of accessing chatClient through hook params, we should maybe provide a single context provider, which customers can wrap on top of their component hierarchy.

import { ChatProvider, useChatStatus }  from 'stream-chat-react-hooks';;

const SomeChatRelatedComponent = () => {
    const status = useChatStatus();

    return (
        // UI logic
    )
}

<ChatProvider client={client}>
    <SomeChatRelatedComponent />
</ChatProvider>

Proposed list of hooks (WIP):

usePaginatedChannels

Gives you managed list of channels, all the functions required to implement pagination and all the flags to implement indicators in infinite scrolling list..

e.g,

const {
    channels,
    setChannels,
    error,
    hasNextPage,
    loadingChannels,
    loadingNextPage,
    loadNextPage,
    refreshing,
    refreshList,
    reloadList,
}  = usePaginatedChannels({ filters, options, sort });

usePaginatedMessages

Gives you list of managed messages, all the functions required to implement pagination and all the flags to implement indicators in infinite scrolling list.

... WIP

useRichMessageList

Gives you list managed message list enriched with group styles, read states and date separators.

... WIP

useMessageComposer

... WIP

useUserRole

Gives you list managed message list enriched with group styles, read states and date separators.

... WIP

useTypingString

Gives you a managed string to display as typing indicator based on who is typing:

e.g.,

const typingString = useTypingString();

console.log(typingString); 
// vishal and amin are typing ...
// vishal and 3 others are typing ...

... WIP

useChatStatus

Gives you access to active/inactive status of chat.

... WIP

useChannelPreview

Gives you the display name, avatar of the channel

... WIP

...

Native hooks

useKeyboard

... WIP

...

These are just the examples of hooks that could be part of this project.
But I would like to hear early feedback from library users about this whole thing. Feel free to send comments or ideas about what kind of hooks would you like to be part of this project. Or if you have some better ideas as to what might make this project more useful or productive

Cheers :)