Edit This Page

Seamstress

Declaratively describe conditional styles of your React components.

Module Version

  • Custom :pseudo-selectors - Familiar styling syntax inspired by CSS.
  • Eliminates most styling boilerplate - Decouple style "rendering" from the render() function.
  • Mix CSS classes and inline styles - Intelligently merge class-names and style props with a single styles prop.

Component Styling:

Before and After

Component Authoring:

Before and After

Installation

npm install react-seamstress --save

Examples

See the examples directory for some simple examples of using Seamstress.

For a more complex component-authoring example, take a look at this fork of react-select that replaces most of its styling logic with Seamstress as an exercise (it was easier than I expected!).

Documentation

Stability & Feedback

This project is still in the experimental phase, and I need feedback.

If you have any issues or ideas please open a new issue.

I can also be reached via email, on Twitter as @louroboros, or on reactiflux as @namuol.

Thanks! :beers:

Prior Art/Acknowledgements