Feed
Interfaces
FeedProps
Properties
| Property | Type | Description |
|---|---|---|
CustomAdvProps? | CustomAdvProps | Props to spread to single custom adv element (this props can be used only if Custom Adv are enabled) Default {} |
FeedSidebarProps? | StickyBoxProps | Props to spread to the sidebar Default {} |
FooterComponent? | ElementType<any> | Component used as footer. It will be displayed after the end messages Default <Footer> |
FooterComponentProps? | any | Props to spread to FooterComponent Default empty object |
HeaderComponent? | Element | Component used as header. It will be displayed at the beginning of the feed Default null |
ItemComponent | ElementType<any> | Component used to render single feed item retrieved by the endpoint |
ItemProps? | any | Props to spread to single feed item Default empty object |
ItemSkeleton | ElementType<any> | Skeleton used to render loading effect during fetch |
ItemSkeletonProps? | any | Props to spread to single feed item skeleton Default empty object |
PaginationLinkProps? | Record<string, any> | Props to spread to the pagination Link component Default {} |
VirtualizedScrollerProps? | VirtualizedScrollerCommonProps | Props to spread to VirtualizedScroller object. Default {} |
cacheStrategy? | CacheStrategies | Caching strategies Default CacheStrategies.CACHE_FIRST |
className? | string | Overrides or extends the styles applied to the component. Default null |
disablePaginationLinks? | boolean | Add/remove pagination links on top/bottom of items Default false |
emptyFeedPlaceholder? | ReactNode | Empty feed placeholder, rendered when no feed item can be displayed Default null |
enabledCustomAdvPositions? | SCCustomAdvPosition[] | Props to programmatically enable the custom adv position in the feed Default [SCCustomAdvPosition.POSITION_FEED_SIDEBAR, SCCustomAdvPosition.POSITION_FEED] |
endMessage? | ReactNode | End message, rendered when no more feed item can be displayed Default <FormattedMessage id="ui.feed.noOtherFeedObject" defaultMessage="ui.feed.noOtherFeedObject" /> |
endpoint | EndpointType | Feed API Endpoint |
endpointQueryParams? | Record<string, string | number> | Feed API Query Params Default [{'limit': 5}] |
hideAdvs? | boolean | Show/hide adv banners Default false |
hidePaginationLinks? | boolean | Show/hide pagination links Default true |
id? | string | Id of the feed object Default 'feed' |
itemIdGenerator | (item: any) => any | Function used to generate an id from the single result returned by the Endpoint |
itemPropsGenerator | (scUser: SCUserType, item: any) => any | Function used to convert the single result returned by the Endpoint into the props necessary to render the ItemComponent |
onNextData? | (page: number, offset: number, total: number, data: any[]) => any | Callback invoked whenever data is loaded during paging next |
onPreviousData? | (page: number, offset: number, total: number, data: any[]) => any | Callback invoked whenever data is loaded during paging previous |
paginationLinksPageQueryParam? | string | Page query parameter name Default 'page' |
prefetchedData? | SCPaginatedResponse<SCFeedUnitType> | Prefetch data. Useful for SSR. Use this to init the component (in particular useSCFetchFeed) |
refreshMessage? | ReactNode | Refresh message, rendered when no more feed item can be displayed Default <FormattedMessage id="ui.feed.refreshRelease" defaultMessage="ui.feed.refreshRelease" /> |
requireAuthentication? | boolean | Authenticated or not |
scrollableTargetId? | string | If the feed is being rendered in a "scrollable container" (for example, if one of the parent elements of the list is styled with max-height and overflow: auto), then passing the "scrollableTargetId" |
widgets? | SCFeedWidgetType[] | Widgets to insert into the feed Default empty array |
Type Aliases
FeedRef
FeedRef:
object
FeedRef props
Type declaration
| Member | Type |
|---|---|
addFeedData | (obj, syncPagination?) => void |
refresh | () => void |
Source
packages/react-ui/src/components/Feed/Feed.tsx:65
FeedSidebarProps
FeedSidebarProps:
StickyBoxProps
FeedSidebarProps has the same props as StickyBoxProps type
Source
packages/react-ui/src/components/Feed/Feed.tsx:60
Functions
FeedSkeleton()
FeedSkeleton(
props):JSX.Element
API documentation for the Community-JS Feed Skeleton component. Learn about the available props and the CSS API.
Import
import {FeedSkeleton} from '@selfcommunity/react-ui';
Component Name
The name SCFeed-skeleton-root can be used when providing style overrides in the theme.
CSS
| Rule Name | Global class | Description |
|---|---|---|
| root | .SCFeed-skeleton-root | Styles applied to the root element. |
| left | .SCFeed-left | Styles applied to the left section. |
| right | .SCFeed-right | Styles applied to the right section. |
Parameters
| Parameter | Type |
|---|---|
props | FeedSkeletonProps |
Returns
JSX.Element
Source
packages/react-ui/src/components/Feed/Skeleton.tsx:56
feed()
feed(
props):ReactElement<any,string|JSXElementConstructor<any>>
NOTE: Exotic components are not callable.
Parameters
| Parameter | Type |
|---|---|
props | FeedProps & RefAttributes <FeedRef> |
Returns
ReactElement<any, string | JSXElementConstructor<any>>