Skip to main content

LMFeedPollDialogPreview

LMFeedPollDialogPreview renders a preview of poll questions and options before submission. It allows users to review and edit poll settings, including question text, options, and duration.

CSS Classnames​

ClassnameDescription
cancelIconClose button icon styling
lm-feed-create-post-wrapperMain wrapper for poll preview dialog
lm-feed-create-post-wrapper__user-metaUser metadata container in poll preview
poll-preview-titleTitle text styling in poll preview
poll-preview-title-parentContainer for poll title section
poll-preview-advance-options poll-preview-subheading-styleAdvanced options styling in poll preview
poll-preview-wrapperMain wrapper for poll preview content
lm-feed-create-post-wrapper__dialog-headingDialog header text styling

Example​

To customize the component with its classnames, open your base CSS file and override the styles using the classname:

.cancelIcon {
font-size: 18px;
color: "red";
}

Advanced Customisation​

Customising LMFeedTextArea​

You can also pass your custom component to replace the default view for LMFeedTextArea. You can use the below hooks and contexts to customise the component.

Hooks Used​

Contexts Used​

Below is an example for customising the view for LMFeedTextArea and rendering your own view. It is fairly a 2 simple step process

  • Step 1: Create your own custom view.
import {
LMSocialFeed,
LMFeedNotificationHeader,
LMFeedUniversalFeed,
LMFeedCustomEvents,
initiateFeedClient,
} from "@likeminds.community/likeminds-feed-reactjs";

// Custom Component for LMFeedTextArea
const CustomLMFeedTextAreaView = () => {
return (
// Your Custom Code
);
};
  • Step 2: Pass your Custom View to LMSocialFeed
import {
LMSocialFeed,
LMFeedNotificationHeader,
LMFeedUniversalFeed,
LMFeedCustomEvents,
initiateFeedClient,
} from "@likeminds.community/likeminds-feed-reactjs"

const App = () => {
const lmFeedClient = initiateFeedClient()

return (
<div className="lm-wrapper">
<LMFeedNotificationHeader customEventClient={customEventClient} />
<LMSocialFeed
client={lmFeedClient}
customEventClient={customEventClient}
userDetails={userDetails}
CustomComponents={{
CustomCreatePostTextArea: <CustomLMFeedTextAreaView />,
}}
>
<LMFeedUniversalFeed />
</LMSocialFeed>
</div>
)
}
export default App

Reference​

For reference, check out this file