Rebass: componenti stilizzati per React

Rebass è una libreria che mette a disposizione alcuni componenti nativi per la realizzazione di interfacce grafiche con il framework React, strutturalmente questa soluzione è stata concepita utilizzando dei componenti stilizzati con lo scopo di mantenere gli stili isolati, una caratteristica che riduce la necessità di definire manualmente regole CSS personalizzate per le proprie Web application.

Alla base della libreria, che viene rilasciata sotto licenza Open Source tramite GitHub, vi è un'interfaccia per la programmazione, la Rebass's props API, che funge da design system altamente configurabile per la creazione semplice e rapida di applicazioni responsive. Ciascun componente di Rebass è associato a diversi oggetti per la stilizzazione ("props") che permettono di gestire numerosi aspetti relativi alla formattazione degli elementi di pagina.

Si possono così gestire facilmente proprietà come le dimensioni dei container, i margini, gli spazi intorno ai contenuti dei box (padding), la grandezza e il colore delle componenti tipografiche così come di altre componenti di pagina. E' possibile personalizzare i componenti offerti da Rebass attraverso l'utilizzo della funzione styled che accetta come parametro l'elemento da stilizzare; lo snippet seguente mostra, ad esempio, la semplice procedura necessaria per la stilizzazione di un pulsante (button):

const CustomButton = styled(Button)`
	border: 1px solid rgba(0, 0, 0, .25);
	background-image: linear-gradient(transparent, rgba(0, 0, 0, .125));
	box-shadow: 0 0 4px rgba(0, 0, 0, .25)
const App = () => (
	
		Hello
	
)
render()

Allo stato attuale Rebass offre ben 45 componenti stilizzabili che vanno dagli elementi dei form (select, textarea, radio, checkbox, input..) ai testi (pre, text, blockquote..), fino alla navigazione, ai link e agli elementi multimediali.

E' bene precisare che Rebass è una libreria che contiene unicamente componenti di tipo presentazionale, si tratta quindi di uno strumento dedicato specificatamente alla gestione delle interfacce utente; presenta però il vantaggio di non richiedere alcuna dipendenza per il suo funzionamento e potrà essere integrata facilmente in qualsiasi progetto che preveda l'interazione server side.

Via Rebass