Componente React per la rotazione di termini
Nel mondo dello sviluppo web, è spesso necessario implementare componenti dinamici che presentino contenuti in modo accattivante e interattivo. Uno dei requisiti comuni è la rotazione di termini o concetti per fornire informazioni o evidenziare punti chiave.
Per soddisfare questa esigenza, abbiamo sviluppato un semplice ma efficace componente React che consente di visualizzare una serie di termini, ciascuno con un colore e una descrizione associati. Il componente offre anche un’opzione di pausa/ripristino per controllare la rotazione dei termini e un collegamento diretto ai dettagli dei termini stessi.
Funzionalità Principali
-
Rotazione Automatica dei Termini: Il componente ruota automaticamente tra una serie di termini, consentendo agli utenti di visualizzare una varietà di concetti in modo dinamico.
-
Controllo della Pausa/Ripresa: Gli utenti possono mettere in pausa e riprendere la rotazione dei termini in qualsiasi momento per avere il controllo completo sull’esperienza di visualizzazione.
-
Link Incorporati: Ogni termine può includere un link che porta a una risorsa esterna correlata.
-
Colore e Descrizione Personalizzabili: Ogni termine è associato a un colore distintivo e a una descrizione dettagliata, che può essere personalizzata per adattarsi alle esigenze specifiche del progetto.
-
Navigazione Diretta ai Dettagli: Ogni termine è collegato direttamente a una pagina o a una risorsa correlata, consentendo agli utenti di approfondire ulteriormente i concetti presentati.
Implementazione
Il componente è stato implementato utilizzando React e le animazioni di @react-spring/web per creare transizioni fluide e accattivanti tra i termini. Sfrutta inoltre lo stato locale per gestire la rotazione dei termini e offre un’interfaccia chiara e intuitiva per controllare il flusso della presentazione.
import React, { useState, useEffect, useRef } from 'react';
import { useSpring, animated } from '@react-spring/web';
const ReactTermRotator = () => {
const termSets = [
[
{ term: 'Api-first', color: 'darkmagenta', link: 'https://webstack.livedata.it/api/', description: 'Approccio di sviluppo in cui le API...' },
{ term: 'RESTful APIs', color: 'navy', link: 'https://en.wikipedia.org/wiki/REST', description: 'Approccio di sviluppo in cui le API...' },
{ term: 'GraphQL', color: 'crimson', link: 'https://webstack.livedata.it/api/graphql/', description: 'Approccio di sviluppo in cui le API...' },
],
[
{ term: 'Jamstack', color: 'darkslategrey', link: 'https://jamstack.org/', description: 'Approccio di sviluppo in cui le API...' },
{ term: 'Serverless', color: 'olive', link: 'https://www.netlify.com/blog/intro-to-serverless-functions/', description: 'Approccio di sviluppo in cui le API...' },
{ term: 'Static Site Generation', color: 'darkorange', link: 'https://webstack.livedata.it/blog/astro-build/', description: 'Approccio di sviluppo in cui le API...' },
],
[
{ term: 'JavaScript', color: 'darkred', link: 'https://developer.mozilla.org/en-US/docs/Web/javascript', description: 'Approccio di sviluppo in cui le API...' },
{ term: 'TypeScript', color: 'darkslateblue', link: 'https://www.typescriptlang.org', description: 'Approccio di sviluppo in cui le API...' },
{ term: 'React', color: 'dimgrey', link: 'https://it.legacy.reactjs.org', description: 'Approccio di sviluppo in cui le API...' },
],
];
const [currentTermIndex, setCurrentTermIndex] = useState(0);
const [selectedSet, setSelectedSet] = useState(0);
const [paused, setPaused] = useState(false);
const boxRef = useRef(null);
const animatedStyle = useSpring({
from: { opacity: 0 },
to: { opacity: 1 },
config: { duration: 500 },
reset: true,
});
useEffect(() => {
const interval = setInterval(() => {
if (!paused) {
setCurrentTermIndex(prevIndex => (prevIndex + 1) % termSets[selectedSet].length);
}
}, 3000);
return () => clearInterval(interval);
}, [selectedSet, termSets, paused]);
const handleBoxClick = () => {
setPaused(prevPaused => !prevPaused);
};
const handleSetChange = (index) => {
setSelectedSet(index);
setCurrentTermIndex(0);
};
return (
<div className="container mt-5">
<div className="row mb-4 text-center">
<div className="col-md-6 mb-2">
<div className="d-flex mb-3">
{termSets.map((set, index) => (
<button
key={index}
className={`btn btn-${index === selectedSet ? 'primary' : 'secondary'} me-2`}
onClick={() => handleSetChange(index)}
style={{ color: index === selectedSet ? 'red' : '#0658d0' }}
>
{index === 0 ? 'API-first' : index === 1 ? 'Jamstack' : 'Javascript'}
</button>
))}
</div>
<div className="card shadow-sm rounded-lg border border-gray-300 p-4 text-white text-center " style={{ backgroundColor: termSets[selectedSet][currentTermIndex].color }}>
<div className="card-body">
<img src="https://webstack.livedata.it/react.png" alt="React Logo" className="w-16 h-auto mx-auto mt-4" />
<animated.p ref={boxRef} style={animatedStyle} onClick={handleBoxClick}>
<a href={termSets[selectedSet][currentTermIndex].link} style={{ color: 'inherit', textDecoration: 'none' }}>
{termSets[selectedSet][currentTermIndex].term}
</a>
<br />
{termSets[selectedSet][currentTermIndex].description}
</animated.p>
<br></br>
</div>
</div>
<br />
<button className="btn btn-warning me-2" onClick={handleBoxClick}>
{paused ? 'Riprendi' : 'Pausa'}
</button>
</div>
</div>
</div>
);
};
export default ReactTermRotator;
Utilizzi Potenziali
Il componente React per la rotazione di termini può essere utilizzato in una varietà di contesti, tra cui:
-
Presentazioni di Prodotto: Per evidenziare le caratteristiche principali di un prodotto o di un servizio in modo dinamico.
-
Guide e Tutorial: Per introdurre concetti chiave o termini tecnici in un tutorial o una guida online.
-
Portali di Formazione: Per presentare in modo interattivo nuovi concetti o lezioni ai partecipanti di corsi online.
-
Siti Web Istituzionali: Per evidenziare i valori fondamentali o gli obiettivi di un’organizzazione in modo coinvolgente.
Il componente React per la rotazione di termini è uno strumento semplice e versatile per arricchire l’esperienza degli utenti attraverso la presentazione dinamica di contenuti. Con le sue funzionalità intuitive e la sua facilità di integrazione, può essere un’aggiunta ‘reattiva’ a qualsiasi progetto di sviluppo web.
Provare il componente è semplice: basta integrarlo nel proprio progetto React e personalizzarlo secondo le esigenze specifiche del caso d’uso.
Esempio implementazione del componente React Term Rotator per variazione di termini su diversi argomenti
Filosofia Open Source
Il componente “Term Rotator” è stato sviluppato con la filosofia Open Source al suo cuore. Ci ispiriamo alla collaborazione, alla trasparenza e alla condivisione del sapere. Riteniamo che l’Open Source sia un fondamento essenziale per l’innovazione e il progresso nell’ambito dello sviluppo software.
Siamo grati alla comunità Open Source e desideriamo contribuire con il nostro componente per arricchire ulteriormente questo ecosistema vibrante. Il componente, seppur essenziale, è funzionale e versatile, offrendo un’aggiunta utile alla gamma di strumenti disponibili per gli sviluppatori.
Puoi trovare il codice sorgente del componente su GitHub qui. Siamo aperti a suggerimenti, correzioni di bug e miglioramenti.