LMQNAFeedPollDialogPreview

LMQNAFeedPollDialogPreview renders a preview of poll questions and options specifically for Q&A posts. It allows users to review and edit poll settings before attaching them to questions.

CSS Classnames

Classname	Description
poll-preview-subheading-style	Subheading text styling in poll preview
poll-preview-advance-options poll-preview-subheading-style	Advanced options styling in poll preview
poll-preview-edit-button-parent	Container for poll edit button
poll-preview-title	Title text styling in poll preview
lm-feed-create-post-wrapper__user-meta	User metadata container in poll preview
lm-feed-create-post-anonymous-post	Container for anonymous post options
poll-preview-header-icon lm-cursor-pointer	Interactive header icon in poll preview
lm-feed-create-post-wrapper__dialog-heading	Dialog header text styling
poll-preview-title-parent	Container for poll title section
anonymous-post-checkbox	Checkbox for anonymous post option
lm-feed-create-post-topic-text-area-divider	Divider between topic and text area
poll-option-text-input poll-option-text-input-preview	Text input styling for poll options
lm-textarea	Text area input styling
cancelIcon	Close button icon styling
poll-option-wrapper	Container for poll option elements
lm-avatar lm-mr-4	Avatar image with right margin spacing
anonymous-post-text	Text label for anonymous post option
poll-preview-wrapper	Main wrapper for poll preview content
lm-feed-create-post-wrapper	Main wrapper for poll creation dialog

Example

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

.poll-preview-subheading-style {
  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

• useTagging.md

Contexts Used

• LMFeedCreatePostContext.md

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 {
  LMQNAFeed,
  LMFeedNotificationHeader,
  LMFeedCustomEvents,
  initiateFeedClient,
  LMQNAFeedUniversalFeed,
} from "@likeminds.community/likeminds-feed-reactjs";

// Custom Component for LMFeedTextArea
const CustomLMFeedTextAreaView = () => {
  return (
    // Your Custom Code
  );
};

• Step 2: Pass your Custom View to LMQNAFeed

import {
  LMQNAFeed,
  LMFeedNotificationHeader,
  LMFeedCustomEvents,
  initiateFeedClient,
  LMQNAFeedUniversalFeed,
} from "@likeminds.community/likeminds-feed-reactjs"

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

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

Reference

For reference, check out this file