LMInput

LMInput renders the input section for the currently opened chatroom. It contains logic for sending message and attachments.

CSS Classnames

Classname	Description
disabled-state	Input field in disabled state
lm-channel-icon send lm-cursor-pointer	Send button with pointer cursor
lm-post-conversation	Container for post conversation
lm-channel-icon lm-cursor-pointer	Channel icon with pointer cursor
lm-giffy-icon	Giphy icon button
dm-request-respond-bottom-sheet	Bottom sheet for DM request response
dm-request-respond-message	Message container for DM request response
dm-request-respond-action-buttons	Container for DM request action buttons
dm-request-accept-action-button dm-request-action-button	Accept button for DM request
dm-request-reject-action-button dm-request-action-button	Reject button for DM request
lm-channel-footer-wrapper	Wrapper for channel footer
og-tag-wrapper	Container for OpenGraph tag
og-tag-container	Container for OpenGraph tag content
og-tag-icon	Icon for OpenGraph tag
og-tag-data	Container for OpenGraph data
og-tag-data-header	Header for OpenGraph data
og-tag-data-description	Description text for OpenGraph data
og-tag-data-url	URL text for OpenGraph data
remove-og-tag-button	Button to remove OpenGraph tag
lm-giphy-container	Container for Giphy content
lm-channel-footer	Footer section of the channel

Example

To customise the component with their classnames, Open your base css file and override the styles using the classname

.og-tag-data-description {
  font-size: 18px;
  color: "red";
}

Advanced Customisations

Hooks Used

• useInput

Contexts Used

• LMChatroomContext.md
• LMGlobalClientProviderContext.md
• LMInputContext.md
• LMUserProviderContext.md

You can customise different component used under LMInput, infact you can provide your own customisation of each of the components. Internally we use contexts such as InputContext, UserProviderContext and many to get the input states and other vitals informations which you might need to display the information. You can take a look at the reference file below to know more. Also you can checkout the Hooks and Contexts sections to know the information returned by them.

Below is an example for customising TextArea of the LMInput. It is fairly a 2 simple step process

• First you create your own custom component using the hooks and contexts made available by LikeMinds. The will be responsible for fetching data, you might want to process. For example you can get function for updating textArea's state using the context LMInputContext.

• Then you just have to pass it as a prop to LMClientOverlayProvider.

Customising Text Area

• Step 1: First create your own CustomInputTextArea.

import {
  LMInputContext
} from "@likeminds.community/likeminds-chat-reactjs";

// Custom Component for LMChatTextArea
const CustomInputTextArea = () => {
    const {
    inputWrapperRef,
    inputBoxRef,
    onTextInputKeydownHandler,
    onTextInputKeyUpHandler,
    updateInputText,
    fetchMoreTags,
    matchedTagMembersList,
    getTaggingMembers,
    clearTaggingList,
  } = useContext(InputContext);
  return (
    //Your Custom View. You can use the information fethed from above to render your views
  );
};

• Step 2: Pass your Custom View to LMClientOverlayProvider

import {
  LMClientOverlayProvider,
  LMChannel,
  initiateLMClient,
  LMChatTheme,
  LMInputContext
} from "@likeminds.community/likeminds-chat-reactjs";

// Custom Component for InputTextArea
const CustomInputTextArea = () => {
    const {
    inputWrapperRef,
    inputBoxRef,
    onTextInputKeydownHandler,
    onTextInputKeyUpHandler,
    updateInputText,
    fetchMoreTags,
    matchedTagMembersList,
    getTaggingMembers,
    clearTaggingList,
  } = useContext(InputContext);
  return (
    // Your Custom Code
  );
};

const App = () => {
  const lmChatClient = initiateLMClient();
  return (
    <LMClientOverlayProvider
      client={lmChatClient}
      userDetails={userDetails}
      lmChatTheme={LMChatTheme.COMMUNITY_CHAT}
      customComponents={{
        input: {
          chatroomInputTextArea: <CustomInputTextArea />
        }
      }}
    >
      <LMChannel />
    </LMClientOverlayProvider>
  );
};
export default App;

Customising Input Emoji Selector

import {
  LMClientOverlayProvider,
  LMChannel,
  initiateLMClient,
  LMChatTheme,
} from "@likeminds.community/likeminds-chat-reactjs";

// Custom Component for InputEmojiSelector
const CustomInputEmojiSelector = () => {
  return (
    // Your Custom Code
  );
};

const App = () => {
  const lmChatClient = initiateLMClient();
  return (
    <LMClientOverlayProvider
      client={lmChatClient}
      userDetails={userDetails}
      lmChatTheme={LMChatTheme.COMMUNITY_CHAT}
      customComponents={{
        input: {
          chatroomInputEmojiSelector: <CustomInputEmojiSelector />,
        }

      }}
    >
      <LMChannel />
    </LMClientOverlayProvider>
  );
};
export default App;

You can also provide custom component for other different input elements. Check out the full list of customisations available from here. Use different props available under input to customise that particular input view.

Reference

For reference checkout this file