react-seamstress
v0.5.0
Published
Experimental interface for exposing style-related state inside complex React components
Downloads
10
Maintainers
Readme
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
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