in packages/communication-react/src/mergedHooks.ts [65:145]
GetChatSelector<Component> extends (state: ChatClientState, props: any) => any
? ReturnType<GetChatSelector<Component>> & Common<ChatHandlers, Parameters<Component>[0]>
: never;
/**
* Helper type for {@link usePropsFor}.
*
* @public
*/
export type CallingReturnProps<Component extends (props: any) => JSX.Element> =
GetCallingSelector<Component> extends (state: CallClientState, props: any) => any
? ReturnType<GetCallingSelector<Component>> & Common<CallingHandlers, Parameters<Component>[0]>
: never;
/**
* Helper type for {@link usePropsFor}.
*
* @public
*/
export type ComponentProps<Component extends (props: any) => JSX.Element> =
ChatReturnProps<Component> extends never
? CallingReturnProps<Component> extends never
? undefined
: CallingReturnProps<Component>
: ChatReturnProps<Component>;
/**
* Primary hook to get all hooks necessary for a React Component from this library.
*
* To call this hook, the component requires to be wrapped under these providers:
*
* 1. For chat components: {@link ChatClientProvider} and {@link ChatThreadClientProvider}.
*
* 2. For calling components: {@link CallClientProvider}, {@link CallAgentProvider} and {@link CallAgentProvider}.
*
* Most straightforward usage of a components looks like:
*
* @example
* ```
* import { ParticipantList, usePropsFor } from '@azure/communication-react';
*
* const App = (): JSX.Element => {
* // ... code to setup Providers ...
*
* return <ParticipantList {...usePropsFor(ParticipantList)}/>
* }
* ```
*
* @public
*/
export const usePropsFor = <Component extends (props: any) => JSX.Element>(
component: Component,
type?: 'calling' | 'chat'
): ComponentProps<Component> => {
const callingSelector = type === 'calling' || !type ? getCallingSelector(component) : undefined;
const chatSelector = type === 'chat' || !type ? getChatSelector(component) : undefined;
const callProps = useCallingSelector(callingSelector);
const chatProps = useChatSelector(chatSelector);
const callingHandlers = useCallingHandlers<Parameters<Component>[0]>(component);
const chatHandlers = useChatHandlers<Parameters<Component>[0]>(component);
if (chatProps) {
if (!chatHandlers) {
throw 'Please initialize chatClient and chatThreadClient first!';
}
return { ...chatProps, ...chatHandlers } as any;
}
if (callProps) {
if (!callingHandlers) {
throw 'Please initialize callClient first!';
}
return { ...callProps, ...callingHandlers } as any;
}
if (!chatSelector && !callingSelector) {
throw "Can't find corresponding selector for this component. Please check the supported components from Azure Communication UI Feature Component List.";
} else {
throw 'Could not find props for this component, ensure the component is wrapped by appropriate providers.';
}
};