Skip to main content

LMFeedModerationScreen

LMFeedModerationScreen renders the moderation interface for managing reported content and user actions. It provides tools for reviewing, approving, or rejecting reported posts and comments.

CSS Classnames

ClassnameDescription
lm-moderation-header__leftLeft section of moderation header
lm-moderation-headerMain header container for moderation screen
lm-flex-growFlexible growth container for layout
moderation-disabled-subheadingSubheading text for disabled moderation state
moderation-disabled-headingMain heading for disabled moderation state
moderation-mobile-tab-wrapperContainer for mobile tab navigation
moderation-disabled-pathPath indicator for disabled moderation
white-bg-containerContainer with white background
moderation-separatorVisual separator between sections
disabled-icons-sizeSize styling for disabled state icons
lm-moderation-containerMain container for moderation screen

Example

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

.lm-moderation-header__left {
font-size: 18px;
color: "red";
}

Advanced Customisation

Customising LMFeedPostView

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

Hooks Used

Below is an example for customising the view for LMFeedPost 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 LMFeedPost
const CustomLMFeedPostView = () => {
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={{
CustomPostView: <CustomLMFeedPostView />,
}}
>
<LMFeedUniversalFeed />
</LMSocialFeed>
</div>
)
}
export default App

Reference

For reference, check out this file