0.7.0 • Published 16 days ago
@yext/chat-headless-react v0.7.0
Chat Headless React
Chat Headless React is the official React UI Bindings layer for Chat Headless
Getting Started - ChatHeadlessProvider
Chat Headless React includes an <ChatHeadlessProvider />
component, which takes in a ChatConfig
, instantiate a ChatHeadless
instance and makes it available to the rest of your app:
import { ChatHeadlessProvider, ChatConfig } from "@yext/chat-headless-react";
const config: ChatConfig = {
botId: "BOT_ID",
apiKey: "API_KEY",
};
function MyApp() {
return (
<ChatHeadlessProvider config={config}>
{/* Add components that use Chat as children */}
<MyComponent />
</ChatHeadlessProvider>
);
}
Respond to State Updates with useChatState
useChatState
reads a value from the ChatState
state and subscribes to updates.
import { useChatState } from "@yext/chat-headless-react";
export default function MyComponent() {
const isLoadingStatus = useChatState((state) => state.conversation.isLoading);
return <div>{`Loading Status: ${isLoadingStatus}`}</div>;
}
Dispatch Actions with useChatActions
useChatActions
allows you to dispatch actions using the ChatHeadless
instance.
import { useChatActions } from "@yext/chat-headless-react";
import { useCallback } from "react";
function MyComponent() {
const actions = useChatActions();
const onClick = useCallback(() => {
actions.setChatLoadingStatus(true);
}, [actions]);
return <button onClick={onClick}>Click Me</button>;
}
0.7.0
16 days ago
0.5.10
9 months ago
0.5.11
9 months ago
0.5.8
10 months ago
0.5.7
10 months ago
0.5.9
9 months ago
0.6.0-alpha.38.2
8 months ago
0.6.0-alpha.38.3
8 months ago
0.6.0-alpha.38
8 months ago
0.5.4
11 months ago
0.5.3
11 months ago
0.5.6
10 months ago
0.5.5
11 months ago
0.5.0
11 months ago
0.6.1
8 months ago
0.5.2
11 months ago
0.6.0
8 months ago
0.5.1
11 months ago
0.4.0
11 months ago
0.3.3
11 months ago
0.3.2
12 months ago
0.3.1
12 months ago
0.3.0
12 months ago
0.2.0
1 year ago
0.1.1
1 year ago
0.1.0
1 year ago