Skip to main content

LMInput

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

CSS Classnames​

ClassnameDescription
disabled-stateContainer or element for disabled state
lm-channel-icon send lm-cursor-pointerContainer or element for lm channel icon send lm cursor pointer
lm-post-conversationContainer or element for lm post conversation
lm-channel-icon lm-cursor-pointerContainer or element for lm channel icon lm cursor pointer
lm-giffy-iconContainer or element for lm giffy icon
dm-request-respond-bottom-sheetContainer or element for dm request respond bottom sheet
dm-request-respond-messageContainer or element for dm request respond message
dm-request-respond-action-buttonsContainer or element for dm request respond action buttons
dm-request-accept-action-button dm-request-action-buttonContainer or element for dm request accept action button dm request action button
dm-request-reject-action-button dm-request-action-buttonContainer or element for dm request reject action button dm request action button
lm-channel-footer-wrapperContainer or element for lm channel footer wrapper
og-tag-wrapperContainer or element for og tag wrapper
og-tag-containerContainer or element for og tag container
og-tag-iconContainer or element for og tag icon
og-tag-dataContainer or element for og tag data
og-tag-data-headerContainer or element for og tag data header
og-tag-data-descriptionContainer or element for og tag data description
og-tag-data-urlContainer or element for og tag data url
remove-og-tag-buttonContainer or element for remove og tag button
lm-giphy-containerContainer or element for lm giphy container
lm-channel-footerContainer or element for lm channel footer

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​

Contexts Used​

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