A timeline is a display of a list of activities or events in chronological order. Timeline is typically a graphic representation, showing a long bar labelled with dates, title or description paralleling it. Here we will create timeline in React.
Create Timeline Component in React
const timelineData = [ { text: 'Started React Tutorials', date: 'February 25 2022', category: { tag: 'react-tutorials', color: '#FFDB14' }, link: { url: 'https://w3courses.org/', text: 'View' } }, { text: 'Started Laravel Tutorials', date: 'March 04 2022', category: { tag: 'laravel-tutorials', color: '#e17b77' }, link: { url: 'https://w3courses.org/', text: 'View' } }, { text: 'MongoDB Tutorials', date: 'March 07 2022', category: { tag: 'mongodb-tutorials', color: '#1DA1F2' }, link: { url: 'https://w3courses.org', text: 'View' } } ]; const TimelineItem = ({ data }) => ( <div className="timeline-item"> <div className="timeline-item-content"> <span className="tag" style={{ background: data.category.color }}> {data.category.tag} </span> <time>{data.date}</time> <p>{data.text}</p> {data.link && ( <a href={data.link.url} target="_blank" rel="noopener noreferrer" > {data.link.text} </a> )} <span className="circle" /> </div> </div> ); const Timeline = () => timelineData.length > 0 && ( <div className="timeline-container"> {timelineData.map((data, idx) => ( <TimelineItem data={data} key={idx} /> ))} </div> ); React Timeline Component CSS
.timeline-container { display: flex; flex-direction: column; position: relative; margin: 40px 0; } .timeline-container::after { background-color: #e17b77; content: ''; position: absolute; left: calc(50% - 2px); width: 4px; height: 100%; } .timeline-item { display: flex; justify-content: flex-end; padding-right: 30px; position: relative; margin: 10px 0; width: 50%; } .timeline-item:nth-child(odd) { align-self: flex-end; justify-content: flex-start; padding-left: 30px; padding-right: 0; } .timeline-item-content { box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); border-radius: 5px; background-color: #fff; display: flex; flex-direction: column; align-items: flex-end; padding: 15px; position: relative; width: 400px; max-width: 70%; text-align: right; } .timeline-item-content::after { content: ' '; background-color: #fff; box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2); position: absolute; right: -7.5px; top: calc(50% - 7.5px); transform: rotate(45deg); width: 15px; height: 15px; } .timeline-item:nth-child(odd) .timeline-item-content { text-align: left; align-items: flex-start; } .timeline-item:nth-child(odd) .timeline-item-content::after { right: auto; left: -7.5px; box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2); } .timeline-item-content .tag { color: #fff; font-size: 12px; font-weight: bold; top: 5px; left: 5px; letter-spacing: 1px; padding: 5px; position: absolute; text-transform: uppercase; } .timeline-item:nth-child(odd) .timeline-item-content .tag { left: auto; right: 5px; } .timeline-item-content time { color: #777; font-size: 12px; font-weight: bold; } .timeline-item-content p { font-size: 16px; line-height: 24px; margin: 15px 0; max-width: 250px; } .timeline-item-content a { color: #333; text-decoration: none; font-size: 14px; font-weight: bold; } .timeline-item-content a::after { content: ' ►'; font-size: 12px; } .timeline-item-content .circle { background-color: #fff; border: 3px solid #e17b77; border-radius: 50%; position: absolute; top: calc(50% - 10px); right: -40px; width: 20px; height: 20px; z-index: 100; } .timeline-item:nth-child(odd) .timeline-item-content .circle { right: auto; left: -40px; } @media only screen and (max-width: 1023px) { .timeline-item-content { max-width: 100%; } } @media only screen and (max-width: 767px) { .timeline-item-content, .timeline-item:nth-child(odd) .timeline-item-content { padding: 15px 10px; text-align: center; align-items: center; } .timeline-item-content .tag { width: calc(100% - 10px); text-align: center; } .timeline-item-content time { margin-top: 20px; } .timeline-item-content a { text-decoration: underline; } .timeline-item-content a::after { display: none; } } Now, we have an <Timeline /> component we can use this in our functional or class components. For example we are using this in our App Component.
const App = () => <> <h1>React Timeline</h1> <Timeline /> </>; ReactDOM.render(<App />, document.getElementById('app')); Please like share subscribe and give positive feedback to motivate me to write more for you.
For more tutorials please visit my website.
Thanks:)
Happy Coding:)
Top comments (0)