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