Nanostyled : une bibliothèque pour construire des composants React stylés

Par:
fredericmazue

jeu, 04/10/2018 - 15:50

Nanostyled est une bibliothèque ultra-légère (moins de 1Ko non minifiée) pour construire des composants React stylés. Cette biblothèque s'efforce de bénéficier de la charge extrêmement faible du CSS pur avec la flexibilité des API de bibliothèques de types CSS-in-JS.

Comme les bibliothèques CSS-in-JS qui l'ont inspirée, Nanostyled permet de construire des éléments d'interface utilisateur avec des styles complexes par défaut, pour ensuite ajuster les styles à l'exécution.

Mais contrairement aux bibliothèques CSS-in-JS, est conçue pour être utilisée en accompagnement de framework de style fonctionnel, tels que Tachyons ou Tailwind. Nanostyled rend les styles fonctionnels moins verbeux et facilite l'extraction des propriétés des composants.

Les avantages des styles fonctionnels, ainsi que les problèmes qu'ils posent, sont détaillés dans un intéressant billet de présentation de Nanostyled.

Nanostyled vient sous la forme d'un paquet npm disponible ici. La page propise également un guide de prise en main.

Nanostyled est sous licence MIT.

Un exemple de bouton 'Nanostylé' :

import nanostyled from 'nanostyled';

// This example uses CSS classes from Tachyons
import 'tachyons/css/tachyons.css';
// A Button with three style props:

const Button = nanostyled('button', {
  color: 'white',
  bg: 'bg-blue',
  base: 'fw7 br3 pa2 sans-serif f4 bn input-reset'
});

const App = () => (
  <div>
    <Button>Base Button</Button>
    <Button bg="bg-yellow">Yellow Button</Button>
  </div>
);