ComponentSheet
ComponentSheet is a better syntax for styling React elements.
What ComponentSheet offers:
-
Style react elements cleanly, without all the
div
/View
className=
orstyle=
noise -
Style elements using JSX
-
Organize your styling, and style-related props, in one place
-
Separate the static parts of your
render()
function -
Supports multiple backends. Works seamlessly with:
- Aphrodite
- React Native
- React Native Web
- Emotion and styled-components support coming soon
- (Interested in using ComponentSheet with another backend? Ping me on Twitter)
Usage
const S = ComponentSheet; { return <S.Container> <S.Message /> <S.ContinueButton = /> </S.Container> ;}
Getting Started
Choose one:
npm install --save @component-sheet/aphrodite
npm install --save @component-sheet/native
(for React Native or react-native-web)- (more coming soon)
How It Works
ComponentSheet takes the jsx you write in ComponentSheet.create
and transforms
any inline style/classname objects into compiled css using the specified backend
library (either Aphrodite, react-native-web, or React Native).
Then, when you render a component declared in your component sheet, it merges in the props you supply at render time, resuling in the final react element.
Advanced Usage
Coming soon.