react-seamstress v0.5.0

Seamstress

Declaratively describe conditional styles of your React components.

• 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:

Component Authoring:

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

• GitBook
• API Reference

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

• Modularise CSS the React Way - article with some ideas that influenced this library
• JedWatson/classNames - conditionally compose classNames
• casesandberg/ReactCSS - declaratively style components
• pluralsight/react-styleable - theme components with CSS modules
• markdalgleish/react-themeable - theme components with inline styles or CSS classes