0.9.5 • Published 4 months ago

@yext/chat-headless-react v0.9.5

Weekly downloads
-
License
BSD-3-Clause
Repository
github
Last release
4 months ago

Chat Headless React

Chat Headless React is the official React UI Bindings layer for Chat Headless

Full Documentation

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.9.4

4 months ago

0.9.5

4 months ago

0.9.3

8 months ago

0.9.2

10 months ago

0.9.0

12 months ago

0.9.1

12 months ago

0.8.0

1 year ago

0.7.0

1 year ago

0.5.10

2 years ago

0.5.11

2 years ago

0.5.8

2 years ago

0.5.7

2 years ago

0.5.9

2 years ago

0.6.0-alpha.38.2

2 years ago

0.6.0-alpha.38.3

2 years ago

0.6.0-alpha.38

2 years ago

0.5.4

2 years ago

0.5.3

2 years ago

0.5.6

2 years ago

0.5.5

2 years ago

0.5.0

2 years ago

0.6.1

2 years ago

0.5.2

2 years ago

0.6.0

2 years ago

0.5.1

2 years ago

0.4.0

2 years ago

0.3.3

2 years ago

0.3.2

2 years ago

0.3.1

2 years ago

0.3.0

2 years ago

0.2.0

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago