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!

Posted by:

Alison Collins

4 responses to “React News Webpart”

vorbelutr ioperbir

January 23, 2023

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.

LikeLike

Reply
Evan

July 7, 2022

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

LikeLiked by 1 person

Reply
graliontorile

April 8, 2022

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!

LikeLike

Reply
reshmee011

November 4, 2021

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

LikeLike

Reply