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
Classname | Description |
---|---|
cancelIcon | Close button icon styling |
lm-feed-create-post-wrapper | Main wrapper for poll preview dialog |
lm-feed-create-post-wrapper__user-meta | User metadata container in poll preview |
poll-preview-title | Title text styling in poll preview |
poll-preview-title-parent | Container for poll title section |
poll-preview-advance-options poll-preview-subheading-style | Advanced options styling in poll preview |
poll-preview-wrapper | Main wrapper for poll preview content |
lm-feed-create-post-wrapper__dialog-heading | Dialog 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