News Updates - Copy this React, Tailwind Component to your project
"use client"; import React, { useState, useEffect, useRef } from "react"; import "./Updates.css"; const Updates = () => { const [newsData, setNewsData] = useState([]); const updatesContainer = useRef(null); // Fetch latest news data useEffect(() => { const fetchNews = async () => { try { const response = await fetch(`https://newsapi.org/v2/everything?q="agriculture market trends" OR "agriculture market" OR "crop prices" OR "market analysis" OR "commodity prices" OR "agricultural economy" OR "crop health" OR "soil health" OR "disease resistance" OR "pest management" OR "yield analysis" OR "plant health" OR "agriculture technology" OR "precision agriculture" OR "smart farming" OR "agritech" OR "sustainable practices" OR "biotechnology" OR "agriculture drone technology" OR "IoT in agriculture" OR "vertical farming"&apiKey=7c2b8053265a4c3a824400ef3b203d28`); const data = await response.json(); setNewsData(data.articles); // Set the news articles data } catch (error) { console.error("Error fetching news:", error); } }; fetchNews(); }, []); // Auto scroll effect useEffect(() => { const interval = setInterval(() => { if (updatesContainer.current) { updatesContainer.current.scrollTop += 100; if (updatesContainer.current.scrollTop >= updatesContainer.current.scrollHeight) { updatesContainer.current.scrollTop = 0; // Reset scroll to top when reaching the end } } }, 3000); // Scroll every 3 seconds return () => clearInterval(interval); }, [newsData]); return ( <div className="Updates" ref={updatesContainer} style={{ overflowY: "auto", maxHeight: "400px" }}> {newsData.map((news, index) => ( <div className="update" key={index}> <img src={news.urlToImage || "default_image_url.jpg"} alt="news" /> <div className="noti"> <div style={{ marginBottom: "0.5rem" }}> <span>{news.title}</span> </div> <span>{new Date(news.publishedAt).toLocaleString()}</span> <div> <a href={news.url} target="_blank" rel="noopener noreferrer"> Read More </a> </div> </div> </div> ))} </div> ); }; export default Updates; i want here smooth automatic scrolling like marque tag and should look good not scrollbar should visible only 3 news and then other should scroll .Updates{ width: 85%; background: white; border radius: 0.7rem; padding: 1rem; gap: 1rem; display: flex; flex direction: column; font size: 13px; /* overflow y: hidden; */ /* transition: scroll 0.5s ease in out; */ overflow: hidden; position: relative; } .update{ display: flex; gap: 0.5rem; align items: center; margin: 10px 0; transition: transform 0.5s ease; /* For smooth transition */ } .update>img{ width: 3.2rem; height: 3.2rem; border radius: 50%; margin right: 10px; } .noti>div>span:nth of type(1){ font weight: bold; } this is my css file note css file as it is because i have set layout
