{"id":19118512,"url":"https://github.com/mdbootstrap/react-news-feed","last_synced_at":"2025-06-20T11:35:22.134Z","repository":{"id":65383667,"uuid":"525782874","full_name":"mdbootstrap/react-news-feed","owner":"mdbootstrap","description":"Responsive React News Feed templates built with Bootstrap 5. News article feed, instagram, facebook and twitter-like feed, posts with comments, social section \u0026 more.  https://mdbootstrap.com/docs/react/extended/news-feed","archived":false,"fork":false,"pushed_at":"2022-08-17T12:45:14.000Z","size":279,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-06T22:46:20.315Z","etag":null,"topics":["bootstrap","bootstrap-template","bootstrap-theme","bootstrap5","css","feed","html","js","news","news-feed","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdbootstrap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.pdf","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-17T12:32:44.000Z","updated_at":"2025-03-06T22:51:52.000Z","dependencies_parsed_at":"2023-01-20T15:45:21.375Z","dependency_job_id":null,"html_url":"https://github.com/mdbootstrap/react-news-feed","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mdbootstrap/react-news-feed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-news-feed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-news-feed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-news-feed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-news-feed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdbootstrap","download_url":"https://codeload.github.com/mdbootstrap/react-news-feed/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-news-feed/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260937306,"owners_count":23085657,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap-template","bootstrap-theme","bootstrap5","css","feed","html","js","news","news-feed","react"],"created_at":"2024-11-09T05:06:40.439Z","updated_at":"2025-06-20T11:35:17.015Z","avatar_url":"https://github.com/mdbootstrap.png","language":"JavaScript","readme":"![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)\n\n# MDB React 5\n\nResponsive React News Feed templates built with Bootstrap 5. News article feed, instagram, facebook and twitter-like feed, posts with comments, social section \u0026 more.\n\nCheck out [React News Feed Documentation](https://mdbootstrap.com/docs/react/extended/news-feed) for detailed instructions \u0026 even more examples.\n\n## Basic example\n![React News Feed Basic Example](https://user-images.githubusercontent.com/108793661/185126188-f93dcc28-05eb-431f-8def-afccce4433cb.png)\n```js\nimport React from \"react\";\nimport {\n  MDBBtn,\n  MDBCol,\n  MDBContainer,\n  MDBRipple,\n  MDBRow,\n} from \"mdb-react-ui-kit\";\n\nexport default function Basic() {\n  return (\n    \u003cMDBContainer className=\"py-5\"\u003e\n      \u003cMDBRow className=\"gx-5\"\u003e\n        \u003cMDBCol md=\"6\" className=\"mb-4\"\u003e\n          \u003cMDBRipple\n            className=\"bg-image hover-overlay ripple shadow-2-strong rounded-5\"\n            rippleTag=\"div\"\n            rippleColor=\"light\"\n          \u003e\n            \u003cimg\n              src=\"https://mdbcdn.b-cdn.net/img/new/slides/080.webp\"\n              className=\"w-100\"\n            /\u003e\n            \u003ca href=\"#!\"\u003e\n              \u003cdiv\n                className=\"mask\"\n                style={{ backgroundColor: \"rgba(251, 251, 251, 0.15)\" }}\n              \u003e\u003c/div\u003e\n            \u003c/a\u003e\n          \u003c/MDBRipple\u003e\n        \u003c/MDBCol\u003e\n        \u003cMDBCol md=\"6\" className=\"mb-4\"\u003e\n          \u003cspan className=\"badge bg-danger px-2 py-1 shadow-1-strong mb-3\"\u003e\n            News of the day\n          \u003c/span\u003e\n          \u003ch4\u003e\n            \u003cstrong\u003eFacilis consequatur eligendi\u003c/strong\u003e\n          \u003c/h4\u003e\n          \u003cp className=\"text-muted\"\u003e\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis\n            consequatur eligendi quisquam doloremque vero ex debitis veritatis\n            placeat unde animi laborum sapiente illo possimus, commodi\n            dignissimos obcaecati illum maiores corporis.\n          \u003c/p\u003e\n          \u003cMDBBtn\u003eRead More\u003c/MDBBtn\u003e\n        \u003c/MDBCol\u003e\n      \u003c/MDBRow\u003e\n    \u003c/MDBContainer\u003e\n  );\n}\n\n```\n\n## How to use?\n\n1. Download MDB 5 - FREE REACT UI KIT\n\n2. Choose your favourite customized component and click on the image\n\n3. Copy \u0026 paste the code into your MDB project\n\n[▶️ Subscribe to YouTube channel for web development tutorials \u0026 resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)\n\n## More examples (click on the image to see a live demo)\n### Blog posts:\n[![React News Feed #1](https://user-images.githubusercontent.com/108793661/185127177-6bcb41ac-8485-4559-9894-c3a3bb4fc5ad.png)](https://mdbootstrap.com/docs/react/extended/news-feed/#blog)\n\n### News aggregator:\n[![React News Feed #2](https://user-images.githubusercontent.com/108793661/185127979-ac14781f-6147-4f54-bf5d-214c90e598a2.png)](https://mdbootstrap.com/docs/react/extended/news-feed/#aggregator)\n\nYou can find other examples [here](https://mdbootstrap.com/docs/react/extended/news-feed).\n\n\u003chr\u003e\n\n## More extended React documentation\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/code/\"\u003eReact Bootstrap Code\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/gallery/\"\u003eReact Bootstrap Gallery\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/hamburger-menu/\"\u003eReact Bootstrap Hamburger Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/jumbotron/\"\u003eReact Bootstrap Jumbotron\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/maps/\"\u003eReact Bootstrap Maps\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/mega-menu//\"\u003eReact Bootstrap Mega Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/media-object/\"\u003eReact Bootstrap Media object\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/multiselect/\"\u003eReact Bootstrap Multiselect\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/masonry/\"\u003eReact Bootstrap Masonry\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/contact/\"\u003eReact Bootstrap Contact form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/gradients/\"\u003eReact Bootstrap Gradients\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/pagination/\"\u003eReact Bootstrap Pagination\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/panels/\"\u003eReact Bootstrap Panels\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/social-media/\"\u003eReact Bootstrap Social Media icons \u0026 buttons\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/search/\"\u003eReact Bootstrap Search\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-sort/\"\u003eReact Bootstrap Table sort\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-responsive/\"\u003eReact Bootstrap Table responsive\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-scroll/\"\u003eReact Bootstrap Table scroll\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-search/\"\u003eReact Bootstrap Table search\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/textarea/\"\u003eReact Bootstrap Textarea\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/sidebar/\"\u003eReact Bootstrap Sidebar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/profiles/\"\u003eReact Bootstrap Profiles\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/dropdown-multilevel/\"\u003eReact Bootstrap Nested Dropdown\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/bootstrap-address-form/\"\u003eReact Bootstrap Address Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/back-to-top\"\u003eReact Scroll Back to Top button\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/product-cards\"\u003eReact Product Cards\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/avatar\"\u003eReact Avatar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/carousel-with-thumbnails\"\u003eReact Carousel Slider with Thumbnails\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/chat\"\u003eReact Chat\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/comparison-table\"\u003eReact Comparison table\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/comments\"\u003eReact Comments\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/drawer\"\u003eReact Drawer\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/faq\"\u003eReact FAQ component / section\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/invoice\"\u003eReact Invoice\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Freact-news-feed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdbootstrap%2Freact-news-feed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Freact-news-feed/lists"}