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
Classname | Description |
---|---|
lm-moderation-header__left | Left section of moderation header |
lm-moderation-header | Main header container for moderation screen |
lm-flex-grow | Flexible growth container for layout |
moderation-disabled-subheading | Subheading text for disabled moderation state |
moderation-disabled-heading | Main heading for disabled moderation state |
moderation-mobile-tab-wrapper | Container for mobile tab navigation |
moderation-disabled-path | Path indicator for disabled moderation |
white-bg-container | Container with white background |
moderation-separator | Visual separator between sections |
disabled-icons-size | Size styling for disabled state icons |
lm-moderation-container | Main 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