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!

4 responses to “React News Webpart”

  1. vorbelutr ioperbir Avatar

    Heya just wanted to give you a brief heads up and let you know a few of the pictures aren’t loading properly. I’m not sure why but I think its a linking issue. I’ve tried it in two different web browsers and both show the same outcome.


  2. Evan Avatar

    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

  3. graliontorile Avatar

    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!


  4. reshmee011 Avatar

    Reblogged this on reshmeeauckloo and commented:
    Great demo and work Alison , looking forward to more demos and articles.


Leave a Reply

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

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

Facebook photo

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

Connecting to %s

%d bloggers like this: