Nel nostro percorso di sviluppo con React.js e Tailwind CSS, è naturale voler creare componenti personalizzati che si adattino alle esigenze specifiche del nostro progetto. In questo script, esploreremo come creare un componente personalizzato in React.js che includa un pulsante e una proprietà di input per impostare colore, padding e forma utilizzando Tailwind CSS, ma senza la complessità nella stesura degli stili.

Cominciamo creando un nuovo componente React chiamato CustomButton. Per brevità, questo componente accetterà le proprietà color, padding e shape per personalizzare l'aspetto del pulsante, potremo in seguito integrare altre casistiche. Utilizzeremo le classi di Tailwind CSS all'interno del componente per applicare gli stili desiderati.

// CustomButton.js
import React from 'react';

const CustomButton = ({ color, padding, shape }) => {
  // Calcoliamo le classi di stile in base alle proprietà passate
  const buttonClasses = `py-${padding} px-${padding} rounded-${shape} bg-${color}-500 text-white font-semibold hover:bg-${color}-600`;

  return (
    <button className={buttonClasses}>
      Custom Button
    </button>
  );
};

export default CustomButton;

In questo componente, abbiamo utilizzato le proprietà passate (color, padding, shape) per calcolare dinamicamente le classi di stile di Tailwind CSS da applicare al pulsante. Ad esempio, bg-${color}-500 imposta il colore di sfondo del pulsante in base alla proprietà color, mentre py-${padding} e px-${padding} impostano il padding del pulsante in base alla proprietà padding. Similmente, rounded-${shape} imposta la forma del pulsante in base alla proprietà shape.

Ora che abbiamo creato il nostro componente personalizzato, possiamo utilizzarlo all'interno di altre parti dell'applicazione React. Ad esempio, possiamo renderizzare il componente CustomButton in un altro componente e passare le proprietà desiderate per personalizzarne l'aspetto.

// App.js
import React from 'react';
import CustomButton from './CustomButton';

const App = () => {
  return (
    <div className="flex justify-center items-center h-screen">
      {/* Utilizziamo il componente CustomButton con diverse proprietà */}
      <CustomButton color="blue" padding="4" shape="sm" />
      <CustomButton color="green" padding="6" shape="lg" />
      <CustomButton color="red" padding="8" shape="none" />
    </div>
  );
};

export default App;