Chat UIKit React v2

Chat UIKit React

Chat UIKit

React

Version 2

Sendbird Chat UIKit v2 for React is no longer supported as a new version is released. Check out our latest Chat UIKit v3

Text localization

Although English is the default language of Sendbird UIKit, it also allows you to localize the stringSet into a language of your choice.

To display text in a language other than English, use the following stringSet to override the default values.

Strings

String	English text
TRYING_TO_CONNECT	Trying to connect...
USER_PROFILE__MESSAGE	Message
USER_PROFILE__USER_ID	User ID
EDIT_PROFILE__TITLE	My profile
EDIT_PROFILE__IMAGE_LABEL	Profile image
EDIT_PROFILE__IMAGE_UPLOAD	Upload
EDIT_PROFILE__NICKNAME_LABEL	Nickname
EDIT_PROFILE__NICKNAME_PLACEHOLDER	Enter your nickname
EDIT_PROFILE__USERID_LABEL	User ID
EDIT_PROFILE__THEME_LABEL	Dark theme
CHANNEL_LIST__TITLE	Channels
CHANNEL__MESSAGE_INPUT__PLACE_HOLDER	Enter message
CHANNEL__MESSAGE_INPUT__PLACE_HOLDER__DISABLED	Chat is unavailable in this channel
CHANNEL__MESSAGE_INPUT__PLACE_HOLDER__MUTED	Chat is unavailable because you are being muted
CHANNEL__MESSAGE_LIST__NOTIFICATION__NEW_MESSAGE	new message(s) since
CHANNEL__MESSAGE_LIST__NOTIFICATION__ON	on
CHANNEL_SETTING__HEADER__TITLE	Channel information
CHANNEL_SETTING__PROFILE__EDIT	Edit
CHANNEL_SETTING__MEMBERS__TITLE	Members
CHANNEL_SETTING__MEMBERS__SEE_ALL_MEMBERS	All members
CHANNEL_SETTING__MEMBERS__INVITE_MEMBER	Invite users
CHANNEL_SETTING__LEAVE_CHANNEL__TITLE	Leave channel
CHANNEL_SETTING__OPERATORS__TITLE	Operators
CHANNEL_SETTING__OPERATORS__TITLE_ALL	All operators
CHANNEL_SETTING__OPERATORS__TITLE_ADD	Add operator
CHANNEL_SETTING__MUTED_MEMBERS__TITLE	Muted members
CHANNEL_SETTING__MUTED_MEMBERS__TITLE_ALL	All muted members
CHANNEL_SETTING__BANNED_MEMBERS__TITLE	Banned members
CHANNEL_SETTING__BANNED_MEMBERS__TITLE_ALL	All banned members
CHANNEL_SETTING__FREEZE_CHANNEL	Freeze channel
BUTTON__CANCEL	Cancel
BUTTON__DELETE	Delete
BUTTON__SAVE	Save
BUTTON__CREATE	Create
BUTTON__INVITE	Invite
BUTTON__CLOSE	Close
BADGE__OVER	+
MODAL__DELETE_MESSAGE__TITLE	Delete this message?
MODAL__CHANNEL_INFORMATION__TITLE	Edit channel information
MODAL__CHANNEL_INFORMATION__CHANNEL_IMAGE	Channel image
MODAL__CHANNEL_INFORMATION__UPLOAD	Upload
MODAL__CHANNEL_INFORMATION__CHANNEL_NAME	Channel name
MODAL__CHANNEL_INFORMATION__INPUT__PLACE_HOLDER	Enter name
MODAL__INVITE_MEMBER__TITLE	Invite member
MODAL__INVITE_MEMBER__SELECTED	selected
MODAL__CREATE_CHANNEL__TITLE	New channel
MODAL__CREATE_CHANNEL__SELECTED	selected
MODAL__USER_LIST__TITLE	members
TYPING_INDICATOR__IS_TYPING	is typing...
TYPING_INDICATOR__AND	and
TYPING_INDICATOR__ARE_TYPING	are typing...
TYPING_INDICATOR__MULTIPLE_TYPING	Several people are typing...
MESSAGE_STATUS__SENDING_FAILED	Couldn't send message
MESSAGE_STATUS__TRY_AGAIN	Try again
MESSAGE_STATUS__OR	or
MESSAGE_STATUS__DELETE	delete
PLACE_HOLDER__NO_CHANNEL	No channels
CHANNEL_FROZEN	Channel frozen
MUTED_PL	Channel frozen
PLACE_HOLDER__WRONG	Something went wrong
PLACE_HOLDER__RETRY_TO_CONNECT	Retry
NO_TITLE	No title
NO_NAME	(No name)
NO_MEMBERS	(No members)
TOOLTIP__AND_YOU	, and you
TOOLTIP__YOU	you
TOOLTIP__UNKOWN_USER	(no name)
UNKNOWN__UNKNOWN_MESSAGE_TYPE	(Unknown message type)
UNKNOWN__CANNOT_READ_MESSAGE	Cannot read this message
MESSAGE_EDITED	(edited)

import {
    SendBirdProvider,
} from "sendbird-uikit";
import "sendbird-uikit/dist/index.css";

const App = () => {
    const [stringSet] = useState({
        'CHANNEL__MESSAGE_INPUT__PLACE_HOLDER': 'Saisissez un message.',  // You can display these texts in other languages.
        'CHANNEL__MESSAGE_INPUT__PLACE_HOLDER__DISABLED': 'Le chat est indisponible dans ce canal.',
        'CHANNEL__MESSAGE_INPUT__PLACE_HOLDER__MUTED': 'Le chat est indisponible parce que vous êtes sous le coup de mute.',
        'CHANNEL__MESSAGE_LIST__NOTIFICATION__NEW_MESSAGE': 'Nouveau(x) message(s) depuis.'
    });

    return (
        <SendBirdProvider
            appId={appId}
            userId={userId}
            stringSet={stringSet}
        >
        ...
        </SendBirdProvider>
    );
}

Sample app