React News Webpart

I wanted to customize the SharePoint News out-of-the-box web part so I re-created it with some of the features I wanted. The web part gets the SharePoint News Posts from a SharePoint site or multiple SharePoint sites and displays them in one of two styles. The styling of my web part is based off of the SharePoint News web part ( width, shadow, etc. )

The main features I wanted to add were the comment count, number of likes, and the pagination ability of the web part.

The web part includes:

  • Pagination ( Back/Next ) and Page number
  • Select Multiple Sites ( Defaults to the current site )
  • Two styling options, Stack or Single
  • News Title as link ( Click to go to post )
  • News Thumbnail Image
  • Preview of Description
  • Author ( Can toggle visibility in Property Pane )
  • Created Date
  • Likes with Office UI Fabric Icons
  • Comments with Office UI Fabric Icons ( Also retrieves nested comments )

You can find the web part here. I will be presenting this web part on the upcoming Nov. 4th SharePoint PnP Community Call- register now!

3 thoughts on “React News Webpart

  1. I was curious, have you ever considered making it optional for the thumbnail to appear on posts besides the very first one? or even alltogether…like an option for the webpart that could be configured in the property pane…or even a variant of the “Top Story” layout MS offers out of the box

    Liked by 1 person

  2. You actually make it appear so easy along with your presentation however I to find this matter to be actually one thing which I think I’d never understand. It sort of feels too complicated and very large for me. I am looking ahead in your subsequent post, I will attempt to get the grasp of it!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: