How do I Change the Default Text in the React UI Components? - Chat

While implementing our chat UI components into your application, you may have had a few thoughts in regards to the product and overall experience. Aside from the overwhelming feeling of joy of how easy it is to integrate your own chat functionality, you may have also been wondering how to change the “Type your message” string in the default message input. Although not immediately obvious, the solution is relatively simple. We use internationalization (i18n) to support local language integration in our chat. Therefore, in order to change the default strings, you just need to update the i18n instance. This can be done like so:

const channelListOverrides = {
  “Type your message”: “write here.“,
  “Loading channels …“: “Loading conversations…“,
};

const i18nInstance = new Streami18n({
  language: “en”,
  translationsForLanguage: {
    …channelListOverrides,
  },
});

const App = () => (
  <Chat
    client={chatClient}
    i18nInstance={i18nInstance}
  >
    <ChannelList />
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput />
      </Window>
      <Thread />
    </Channel>
  </Chat>
);

A full list of our i18n strings can be found here: https://github.com/GetStream/stream-chat-react/blob/2c2180ed10d0b8afaa90d17779e09e1de5bca010/src/i18n/en.json